動畫的思路很簡單，點擊頁面上一個元素，頁面滾動到指定位置。下麵介紹一下我3個小時百度的研究成果： 首先是html部分： 先添加兩個<a>元素作為按鈕。然後對<a>元素進行補充： 接著引入jquery和寫入代碼： 需要註意: 1、寫入的代碼最好在引入的jquery語句下方 2、id一定要和<a>元素對 ...
動畫的思路很簡單，點擊頁面上一個元素，頁面滾動到指定位置。下麵介紹一下我3個小時百度的研究成果：
首先是html部分：
<html> <body> <a>頂部</a>
<a>中部</a> ...<p>持續添加直到出現滾動條</p>...
</body>
</html>
先添加兩個<a>元素作為按鈕。然後對<a>元素進行補充：
<html> <body> <a href="javascript:;" id="tab1">頂部</a> <a href="javascript:;" id="tab2">中部</a> ...<p>持續添加直到出現滾動條</p>... </body> </html>
href="javascript:;"大概意思是說a元素可以激活js代碼。如果不加則代碼無效。使用<button>則無需添加。
接著引入jquery和寫入代碼：
<script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $("#tab1").click(function(){ $("html,body").animate({scrollTop:'0px'},300); }); $("#tab2").click(function(){ $("html,body").animate({scrollTop:'600px'},300); }); }); </script>
需要註意:
1、寫入的代碼最好在引入的jquery語句下方
2、id一定要和<a>元素對應
3、"html,body"代表整體移動
4、({scrollTop:'600px'},300);前面的數值是移動距離，後面的數值是動畫時間（單位是毫秒）
做到這一步代碼就能運行了。
下麵詳細的解析一下jquery代碼：
$(document).ready(function(){
//這一句都要加，不加會出錯，沒有實際作用
$("#tab1").click(function(){
//$("#tab1")是選擇器，click()是方法。意思是說對#tab1使用click方法
$("html,body").animate({scrollTop:'0px'},300);
//我理解的scrollTop是個變數屬性，代表元素最頂端和當前瀏覽器顯示區域上邊沿之間的距離，所以這句話的意思是：讓body的上邊沿和瀏覽器可視區域上邊沿距離為0px，結果就是回到頁面頂端。
});
...
});
