萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery實現頁面內錨點平滑跳轉特效的方法總結
jQuery實現頁面內錨點平滑跳轉特效的方法總結
通過jQuery實現頁面內錨點平滑跳轉的方法很多，可以通過插件hovertreescroll實現，也可以簡單的通過animate方法實現，下面介紹這2種比較簡單的方法。
平時我們做導航滾動到內容都是通過錨點來做，刷的一下就直接跳到內容了，沒有一絲的滾動效果，而且 url 鏈接最後會有“小尾巴”，就像#keleyi，今天我就介紹一款 jquery 做的滾動的特效，既可以設置滾動速度，又可以在 url 鏈接上沒有“小尾巴”。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery實現頁面內錨點平滑跳轉</title><base target="_blank" /> <style type="text/css"> #hovertree { height: 800px; background: red; text-align:center;color:white; } #keleyi { height: 800px; background: green;text-align:center;color:white; } #myslider { height: 800px; background: black;text-align:center;color:white; } #zonemenu { height: 800px; background: yellow;text-align:center; } .keleyilink{position:fixed;} .keleyilink a {text-decoration:none;} </style> </head> <body> <div class="keleyilink"> <a href="javascript:scroll('hovertree');" target="_self">HoverTree</a> <a href="javascript:scroll('keleyi');" target="_self">KKK</a> <a href="javascript:scroll('myslider');" target="_self">myslider</a> <a href="javascript:scroll('zonemenu');" target="_self">ZoneMenu</a> </div> <div id="hovertree">hovertree <br /><br /><br /><a href="">原文</a> <a href="">JJJ</a> <a href="http://hovertree.com">HoverTree</a> <a href="/">特效庫</a> </div> <div id="keleyi">jb51</div> <div id="myslider">myslider</div> <div id="zonemenu">zonemenu</div> <script src="jquery/jquery-1.11.3.min.js"></script> <script src="jquery.hovertreescroll.js"></script> <script> function scroll(id) { $("#" + id).HoverTreeScroll(1000); } </script> </body> </html>更簡單點的實現方法：
代碼只有一句話
復制代碼 代碼如下:
$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);
animate()方法用來實現一組css的自定義動畫，有兩種調用方法
第一種形式接受4個參數，如下所示
.animate( properties [, duration] [, easing] [, complete] )
properties – 一個包含樣式屬性及值的映射
duration – 可選的速度參數，既可以是預置的字符串，也可以是一個毫秒數值
easing – 可選的緩動類型，jquery默認的只有兩種：swing和linear,要使用其它效果需要安裝緩動類的插件
complete – 可選的回調函數，在動畫結束時被調用
第一種形式的示例如下
?
1 2 3 4 .animate({property1: 'value1', property2: 'value2'}, speed, easing, function() { alert('The animation is finished.'); });本文實現錨點跳轉的代碼使用了第一種形式
$("html,body")代表對html或body元素進行動畫，即要改變他們的css屬性值
scrollTop是要改變的屬性值，表示滾動條滑過的距離，在這裡表示向下拉動浏覽器滾動條後html(body)被浏覽器頂端隱藏的高度
$("#elementid").offset().top就是html(body)需要被浏覽器頂端隱藏的高度，它代表id為elementid的元素頂端到網頁頂端(不是浏覽器可視區域頂端)的絕對距離。
1000是指動畫時間為1秒
animate()方法還有第二種調用形式
.animate( properties, options )
一個是屬性映射，一個是選項映射。實際上這裡的第二個參數是把第一種形式的第2-4個參數封裝在另一個映射中，同時又添加了兩個選項。第二種形式的代碼如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 .animate({ property1: 'value1', property2: 'value2' }, { duration: 'value', easing: 'value', complete: function(){ alert('The animation is finished.'); }, queue: boolen, step: callback });以上所述就是本文的全部內容了，希望大家能夠喜歡。
