jquery实现平滑滚动到顶部、底部、或者指定位置
个人随笔，欢迎指教。
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery实现平滑滚动到顶部、底部、或者指定地方</title>
<script type="text/javascript" src="JavaScript/jquery-1.11.2.min.js"></script>
<style>
.box{
margin:30px auto;
width:800px;
height:230px;
background:#060;
color:white;
font-size:20px;}
.readNav{
width:90px;
height:215px;
text-align:center;
position:fixed;
right:30px;
bottom:320px;
padding:5px;
border:1px solid gray;}
.readNav p{
cursor:pointer;}
.readNav p:hover{
font-size:large;}
.goTo{
position:fixed; /*当position设置为fixed的时候，元素的位置是相对浏览器窗口的而不是其父容器*/
right:30px;
bottom:30px;}
.toTop,.toBottom{
width:44px;
word-break:break-all;
border:1px solid gray;
border-radius:40px;
cursor:pointer;
border:outset;}
</style>
</head>
<body>
<div class="box top">
<h3>第一部分</h3>
“停一停，”他说道，“你应该先把木板头子锯掉再钉上去。”于是，贾金斯便四处去找锯子。找来锯子之后，还没有锯到两三下又撒手了。“这把锯子，”他说，“需得磨快些。”于是他又去找锉刀。接着又发现在使用锉刀之前，必须先在锉刀上安一个顺手的手柄，为了给锉刀安手柄，他又去灌木丛中寻找小树，要砍下小树干，他又发现这得先磨快斧头。当然，要磨快斧头，他不得不先将磨石固定好，这样磨起来才得心应手；可这又免不了要制作几根支撑磨石的木条。为了把这事儿办得体面些，贾金斯决定做一张木匠用的长凳；可这没有一套齐全的工具是不可能的事。于是，贾金斯到村里去找他所需要的工具，然而这一走，就再也不见他回来了。
</div>
<div class="box">
<h3>第二部分</h3>
自从第一桩事儿以后，我逐渐和贾金斯混熟了，十分了解他无论学什么都是半途而废。曾有一段时间，他废寝忘食地攻读法语，但很快便发现要真正掌握法语，必须首先对古法语有透彻的了解，然而实践表明：没有对拉丁语的全面掌握和理解，要想学好法语是绝不可能的。贾金斯进而发现，掌握拉丁语的唯一途径是学习梵文，因为梵文显然是拉丁语的基础。因此贾金斯便一头扑进梵文的学习之中，直到他发现，要正确地理解梵语，非学古伊朗语不可，因为它是语言的根本。然而，这种语言却早已销声匿迹了。
</div>
<div class="box">
<h3>第三部分</h3>
这样，贾金斯不得不一切从头开始。无可否认，他的确在自然科学上取得过一些成绩。他研究过物理学，很快从对力的研究追溯到分子，又从分子到原子，再从原子到电子，当他的全部研究已扩展到无限的空间领域时，他却仍然在那里追根溯源。
</div>
<div class="box">
<h3>第四部分</h3>
但这无关紧要。他有的是钱，可以拿出10万美元的资本直接开厂兴业。起初，他将这笔钱投资办一家煤气厂，可他发现造煤气所需的煤炭价钱昂贵，这使他大为亏本。于是，他以9万美元的售价把煤气厂转让出去，开办起煤矿来。可这又不走运，因为采矿机械的耗资大得吓人。因此，贾金斯把在矿里拥有的股份变卖成8万美金，转入了煤矿机器制造业。这样，他本来可以赚些钱的，偏偏用作工厂动力的是煤气，耗费巨大。于是贾金斯又以7万元的价卖掉他的制造业。从那以后，他便象一个倒行的滑冰者，在有关的各种工业部门中滑进滑出，没完没了。
</div>
<div class="box">
<h3>第五部分</h3>
为此，他开始在津神品德方面陶冶自己。他去一所星期日学校教了一个半月的课，这时他意识到，假如一个人不打算首先系统地学习巴勒斯坦历史，休想在教书这样神圣的职业中干出一番事业。他还认为，当一个人对以色列的历史还只是一知半解，想去追逐一个女人，那真是无赖之徒。因此，贾金斯自动逃遁了。当他认为问心无愧、无妨启齿求婚之日，整整将近两年的光陰已经流逝了。这时，那位姑娘早已嫁给一个愚蠢的家伙，脚上穿着漆皮长靴。
</div>
<div class="box bottom">
<h3>第六部分</h3>
这一次他如痴如醉地爱上了一位迷人的、有5个妹妹的姑娘。无论哪位名副其实的男子汉，准会一见钟情地爱上象她这样的姑娘。既然如此，贾金斯一定会向姑娘求婚的。可是当他上姑娘家时，遇见的却是她家的二妹。当然这位妹妹更年轻，这样贾金斯便喜欢上了二妹。可是一天晚上，当他去姑娘家拜访时，开门的是一位更小的妹妹。这一来，贾金斯只好倒回去逐个地将众姐妹衡量了一番，到最后一个也没上手。”“也许贾金斯从未结成婚倒是件好事，因为贾金斯的情形每况愈下，越来越穷，结了婚会陷入更困难的境地。你知道，他卖掉了最后一项营生的最后一份股份后，便用这笔钱买了一份逐年支取的终生年金。可是这样一来，支取的金额将会逐年减少，因此他要是活的时间长了，早晚得饿死。
</div>
<!--回顶部或者底部按钮-->
<div class="goTo">
<p><button class="toTop">回到顶部</button></p>
<p><button class="toBottom">回到底部</button></p>
</div>
<!--右侧内容跳转导航-->
<div class="readNav">
<p>第一部分</p>
<p>第二部分</p>
<p>第三部分</p>
<p>第四部分</p>
<p>第五部分</p>
<p>第六部分</p>
</div>
<script>
$(function(){
<!--回到顶部-->
$(".toTop").click(function(){
<!--此处加入finish防止多次点击回顶部或者回底部多次触发动画的bug也可以使用stop()来替换finish()-->
$("html,body").finish().animate({"scrollTop":"0px"},900);
});
<!--回到底部-->
$(".toBottom").click(function(){
$("html,body").finish().animate({"scrollTop":$(".bottom").offset().top},900);
});
<!--跳转至相应的位置-->
$(".readNav p").click(function(){
var index=$(".readNav p").index(this); <!--根据索引匹配找到导航到应的内容-->
$("html,body").finish().animate({"scrollTop":$("div").eq(index).offset().top},400);
});
});
</script>
</body>
</html>
效果如下：
