Home。 下面給出我發現好的原始碼:"/> Home。 下面給出我發現好的原始碼:">

首頁  >  文章  >  web前端  >  js錨點滾動實例分享

js錨點滾動實例分享

小云云
小云云原創
2018-03-12 16:09:541319瀏覽

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

相關推薦:

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

#

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn