标签：
回到顶部和回到底部在当前的网页中应用时相当广泛的
为了更好的体验，我们在回到顶部或回到底部的过程中采用一个渐进的滚动
那么我们就要用到强大的 Jquery 了。具体步骤如下：
1、在压面 body 中的任何地方加入一下代码
<div id="scroll"> <div id="toTop" class="scrollItem"> 回到顶部 </div> <div id="toBottom" class="scrollItem"> 回到底部 </div> </div>
在head中加入css
#scroll {position:fixed; top:300px; right:100px;}
.scrollItem {width:20px; height:70px;border:#e1e1e1 1px solid; cursor: pointer; text-align: center; padding-top: 10px;}
当然你也可以定义自己的外观，可以放上一张图片来替代，关键的是保持id与js代码中一致，而且要将滚动导航层的position设置为fixed，这样当我们拖动滚动条的时候，滚动导航层才不会动。
2、引入jqeury库文件
<script type="text/javascript">// <![CDATA[
$( function () {
var speed = 1000;//自定义滚动速度
//回到顶部
$( "#toTop").click( function () {
$( "html,body").animate({ "scrollTop" : 0 }, speed);
});
//回到底部
var windowHeight = parseInt($("body").css("height" ));//整个页面的高度
$( "#toBottom").click(function () {
$( "html,body").animate({ "scrollTop" : windowHeight }, speed);
});
});
// ]]></script>
在以上的JS代码中，我们可以自定义滚动速度，speed值越大，滚动越快
var speed = 1000;
那么你的页面便实现了回到顶部和底部的功能。
在此我还要多添加一个功能，那就是滑动到指定ID的元素，语法如下。需要把scrollTop设置为
$(‘#ID’).offset().top
如果你是一名站长，你可以将上面的代码放到底部模板（一般是footer.php）中，那么你的网站的所有页面都具备了这样的功能。
标签：
原文地址：http://www.cnblogs.com/huangcj/p/5406865.html
