配合bootstrap寫出的。下面是乾貨: ul 的每個li的每個a中的href指向錨點目標,比如說ef5dc968b76d5ea7ce8b8602c8c59a96a92e72f0d0a57d5f978c135d16bfdbe2Home5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb。
下面給出我發現好的原始碼:
$('#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,挺好的。
相關推薦:
#以上是js錨點滾動實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!