js錨點滾動實例分享

配合bootstrap寫出的。下面是乾貨： ul 的每個li的每個a中的href指向錨點目標，比如說<li class="active"><a href="#index">Home</a></li>。  下面給出我發現好的原始碼：

$('#navbar-menu ul li a[href^="#"]').click(function(e){
                    e.preventDefault();
                    $('html, body').animate({scrollTop: $(this.hash).offset().top}, 400);
                });

翻譯一下：點擊的時候，首先阻止了預設行為，然後讓html,和body滾動動畫，滾動到離頂部的距離為目標的offset().top的距離，在4毫秒內完成。 hash 屬性是一個可讀可寫的字串，該字串是 URL 的錨部分（從 # 號開始的部分），所以this.hash是指目前的位址的#部分。關於this表示的對象，以後會總結。
ps:$('body').scrollspy({ target: '#menu-nav' })這個bootstrap的scrollspy插件，自動監察目標滾動，從而改變相應的active，挺好的。

相關推薦：

Javascript實作導航錨點滾動效果實例

#

以上是js錨點滾動實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！