js配合錨點實現動畫滾動與監聽
阿新 • • 發佈:2019-02-17
這個技能感覺不錯,配合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,挺好的。