jquery实现平滑滚动到顶部、底部、或者指定位置（个人随笔）

浏览数：76 / 时间：2015年06月09日

个人随笔，欢迎指教。

代码如下：

<!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>

　　效果如下：

技术分享