JQ 實現點選連結滾動到指定位置。（非直接跳轉）
阿新 • • 發佈：2019-01-07
平時我們做網頁時都會使用<a>來建立連結，再用href屬性來定位，使我們點選時網頁能夠到達我們所希望到達的位置。
但是如果直接點選的話，網頁會瞬間跳轉（閃現）到指定位置。但一些情況下這樣的效果並不理想，無法進行平滑的過渡。
這時候使用jQuery，可以達到我們所需的效果。
主要運用到了$(selector).animate(styles,speed,easing,callback)和scrollTop函式
這裡我們用到了style[設定移動到達的位置]和speed[設定滾動的事件，單位：毫秒]
/*先定義頁面模式*/
<html>
<head></head>
<title></title>
<body>
<div style="width:800px height:1400px">
<a id="text1" href="#text2">123</a>
</div>
<div id="text2" style="width:800px height:400px">123</div>
</body>
</html>
/*建立jq函式實現效果*/
$(document).ready(function(){
$("#text1").click(function(){
$("html,body").animate(
{scrollTop:$($("#text1").attr('href')).offset().top},500 /*scroll實現定位滾動*/
);/*讓整個頁面可以滾動*/
return false;});
});
/*引用jq框架及函式部分省略*/
這樣就可以實現點選連結滾動到指定錨點的效果