背景图片为金木研，这是我最爱的一张图。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta charset="utf-8"> <head> <title>jQuery之锚点带动画跳转特效</title> <script src="https://files.cnblogs.com/files/caidupingblogs/jquery-1.6.2.min.js" type="text/javascript"></script> <style> .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } /* 复位 */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p , form, fieldset, legend, input, button, textarea, th, td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset, img { border:0; } ul,li { list-style:none; } body { background: #0A0A0A; color: #40E0D0; } .row:after { clear:both; content:'\0020'; display:block; height:0; } .row { zoom:1; } /* 链接颜色 */ a,button{outline:none; hide-focus: expression(this.hideFocus=true); } a{ color:#FFFFFF; text-decoration:none; } a:hover{ color:#FFFFFF; text-decoration: underline; } .fst{ font-family: "\5B8B\4F53"; } h1,h2,h3,h4,h5,h6{font-family:\5FAE\8F6F\96C5\9ED1; font-size: 16px;} /* 底部复位 */ .row{ width:1000px; margin:0 auto; } /*模板头部，所有专题页面公用*/ .index_nav{width:575px; height: 70px; margin: 0 auto; padding-left: 5px; background: #fff;} .index_nav li{width: 115px; height: 70px; float: left;} .index_nav li a{display: block; float: left; width: 110px;height: 65px; background:url(http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_5-121106095005-50.gif) 0 0 no-repeat; text-align: center; color: #00000;} .index_nav li a i{display: block; padding-top: 12px; height: 22px; line-height: 22px;} .index_nav li a strong{font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 24px; display: block; height: 30px; line-height: 20px;} .index_nav li a:hover{background-position: 0 -50px; color: #fff; text-decoration: none;} .h15{height: 15px; overflow: hidden;} h2{ font-size: 24px; text-align: center; color: #FFFFFF; font-weight: bold; } .mainpage p{width: 650px; margin: 0 auto; color: #fff; font-size: 16px; padding: 50px 0 50px;} /*.mainpage p{width: 650px; margin: 0 auto; color: #fff; font-size: 16px; padding: 100px 0 100px;} .mainpage1{background: #00F5FF;} .mainpage2{background: #be0000;} .mainpage3{background: #2E8B57;} .mainpage4{background: #1874CD;} .mainpage5{background: #B03060;} <div class="h50"></div> <div class="row" id="main"> <h2 id="index_1">这是第一个活动页</h2> <div class="mainpage mainpage1"></div> </div> <div class="h15"></div> <div class="row"> <h2 id="index_2">这是第二个活动页</h2> <div class="mainpage mainpage2"></div> </div> <div class="h15"></div> <div class="row"> <h2 id="index_3">这是第三个活动页</h2> <div class="mainpage mainpage3"></div> </div> <div class="h15"></div> <div class="row"> <h2 id="index_4">这是第四个活动页</h2> <div class="mainpage mainpage4"></div> </div> <div class="h15"></div> <div class="row"> <h2 id="index_5">这是第五个活动页</h2> <div class="mainpage mainpage5"></div> </div> */ *html{background-image:url(about:blank);background-attachment:fixed;} #tbox{width:30px; height:240px; float:right; position:fixed; display: none; _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); _margin-bottom:50px; }/*这个只能改宽高其他的不要修改，需要滚动的内容都要放在这个div里面*/ .taoba{ display:block; width:30px; height:30px; margin-bottom:4px; text-align: center; color: #fff; line-height: 30px; overflow: hidden; cursor:pointer; background-color: #c2c2c2; background-position: right; } .taoba:hover{ text-decoration: none; color: #000000; background-color: #FFFFFF; } #gotop{display:block; width:50px; height:120px; text-indent:-999px; overflow: hidden; color: #fff; background:url(http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_5-120601155S6-50.png) no-repeat; position:absolute; display:none; cursor:pointer} #gotop:hover{background-position: 0 -50px;} </style> <script type="text/javascript"> jQuery(document).ready(function($) { $(".index_nav li a").click(function(event) { var index=this.title var id='#'+'index_'+index $("html,body").animate({scrollTop: $(id).offset().top}, 1000); }); $(".taoba").click(function(event) { var index=this.title var id='#'+'index_'+index $("html,body").animate({scrollTop: $(id).offset().top}, 1000); }); function a(x,y){ l = $('#main').offset().left; w = $('#main').width(); $('#tbox').css('left',(l + w + x) + 'px'); $('#tbox').css('bottom',y + 'px'); }//获取#tbox的div距浏览器底部和页面内容区域右侧的距离函数#main为页面的可视宽度 $(function() { $(window).scroll(function(){ t = $(document).scrollTop(); if(t>500){ $('#tbox').show(); }else{ $('#tbox').hide(); } if(t > 50){ $('#gotop').fadeIn('slow'); }else{ $('#gotop').fadeOut('slow'); } }) a(10,100);//#tbox的div距浏览器底部和页面内容区域右侧的距离 $('#gotop').click(function(){ $('body,html').animate({ scrollTop: 0 }, 500);//点击回到顶部的时间ms return false; }) }); }); </script> </head> <body> <div class="indexnav_wrap"> <ul class="index_nav"> <li><a href="javascript:void(0)" title="1"><i>活动</i><strong>1</strong></a></li> <li><a href="javascript:void(0)" title="2"><i>活动</i><strong>2</strong></a></li> <li><a href="javascript:void(0)" title="3"><i>活动</i><strong>3</strong></a></li> <li><a href="javascript:void(0)" title="4"><i>活动</i><strong>4</strong></a></li> <li><a href="javascript:void(0)" title="5"><i>活动</i><strong>5</strong></a></li> </ul> </div> <div class="h50"></div> <div class="row" id="main"> <h2 id="index_1">这是第一个活动页</h2> <div class="mainpage mainpage1"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_QQ%e6%88%aa%e5%9b%be20151028154841.png"></img></div> </div> <div class="h15"></div> <div class="row"> <h2 id="index_2">这是第二个活动页</h2> <div class="mainpage mainpage2"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_QQ%e6%88%aa%e5%9b%be20151028154841.png"></img></div> </div> <div class="h15"></div> <div class="row"> <h2 id="index_3">这是第三个活动页</h2> <div class="mainpage mainpage3"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_QQ%e6%88%aa%e5%9b%be20151028154841.png"></img></div> </div> <div class="h15"></div> <div class="row"> <h2 id="index_4">这是第四个活动页</h2> <div class="mainpage mainpage4"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_QQ%e6%88%aa%e5%9b%be20151028154841.png"></img></div> </div> <div class="h15"></div> <div class="row"> <h2 id="index_5">这是第五个活动页</h2> <div class="mainpage mainpage5"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_QQ%e6%88%aa%e5%9b%be20151028154841.png"></img></div> </div> <div id="tbox"><!-- 侧边框 --> <a class="taoba" href="javascript:void(0)" title="1">1</a> <a class="taoba" href="javascript:void(0)" title="2">2</a> <a class="taoba" href="javascript:void(0)" title="3">3</a> <a class="taoba" href="javascript:void(0)" title="4">4</a> <a class="taoba" href="javascript:void(0)" title="5">5</a> <a id="gotop" href="javascript:void(0)" title="顶部">顶部</a> </div> </div> </body>
