個人隨筆，歡迎指教。
代碼如下：
<!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>
效果如下：
