1. 程式人生 > >js配合錨點實現動畫滾動與監聽

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,挺好的。