jquery實現平滑滾動到頂部、底部、或者指定位置

時間 2019-11-11
原文原文鏈接
我的隨筆，歡迎指教。javascript
代碼以下：html
<!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>
　　效果以下：java
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。