jQuery實現(xiàn)平滑滾動到指定錨點的方法

Yujiaao 發(fā)布于2019-08-26 11:44 / 1080人閱讀

摘要：本文實例講述了實現(xiàn)平滑滾動到指定錨點的方法。代碼通過使頁面跳轉(zhuǎn)至為的頁面。代碼錨點平滑滾動我是新手，有不足的問題希望提出。希望本文所述對大家的程序設(shè)計有所幫助。

本文實例講述了jQuery實現(xiàn)平滑滾動到指定錨點的方法。
html代碼

通過 a href使頁面跳轉(zhuǎn)至id為section_07的頁面。
js代碼

//錨點平滑滾動
    $("a.topLink").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 600,
      easing: "linear"
    });
    return false;
    });

我是新手，有不足的問題希望提出。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。

GPU云服務(wù)器云服務(wù)器滾動到指定位置 asp錨點的屬性視圖平滑滾動 js平滑滾動

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/107484.html

相關(guān)文章

單頁面官網(wǎng)-平滑過渡到指的錨點

摘要：特點單頁面官網(wǎng)不是傳說中的單頁面應(yīng)用固定頂部，點擊導(dǎo)航平滑過渡到指定錨點，鼠標(biāo)上下滾動到錨點位置導(dǎo)航隨之切換如考拉微課布局頂部導(dǎo)航欄內(nèi)容區(qū)底部樣式導(dǎo)航欄的樣式要注意，這給當(dāng)前樣式單獨做了一個層，絕對定位，鼠標(biāo)移動特點單頁面官網(wǎng)--不是傳說中的單頁面應(yīng)用！固定頂部，點擊導(dǎo)航平滑過渡到指定錨點，鼠標(biāo)上下滾動到錨點位置導(dǎo)航隨之切換如：考拉微課 HTML布局 ...

zhaot 2019-08-01 17:28 評論0 收藏0
單頁面官網(wǎng)-平滑過渡到指的錨點

摘要：特點單頁面官網(wǎng)不是傳說中的單頁面應(yīng)用固定頂部，點擊導(dǎo)航平滑過渡到指定錨點，鼠標(biāo)上下滾動到錨點位置導(dǎo)航隨之切換如考拉微課布局頂部導(dǎo)航欄內(nèi)容區(qū)底部樣式導(dǎo)航欄的樣式要注意，這給當(dāng)前樣式單獨做了一個層，絕對定位，鼠標(biāo)移動特點單頁面官網(wǎng)--不是傳說中的單頁面應(yīng)用！固定頂部，點擊導(dǎo)航平滑過渡到指定錨點，鼠標(biāo)上下滾動到錨點位置導(dǎo)航隨之切換如：考拉微課 HTML布局 ...

SegmentFault 2019-08-20 18:56 評論0 收藏0
單頁面官網(wǎng)-平滑過渡到指的錨點

摘要：特點單頁面官網(wǎng)不是傳說中的單頁面應(yīng)用固定頂部，點擊導(dǎo)航平滑過渡到指定錨點，鼠標(biāo)上下滾動到錨點位置導(dǎo)航隨之切換如考拉微課布局頂部導(dǎo)航欄內(nèi)容區(qū)底部樣式導(dǎo)航欄的樣式要注意，這給當(dāng)前樣式單獨做了一個層，絕對定位，鼠標(biāo)移動特點單頁面官網(wǎng)--不是傳說中的單頁面應(yīng)用！固定頂部，點擊導(dǎo)航平滑過渡到指定錨點，鼠標(biāo)上下滾動到錨點位置導(dǎo)航隨之切換如：考拉微課 HTML布局 ...

tianhang 2019-08-29 13:13 評論0 收藏0
scrollIntoView 與平滑滾動

摘要：默認(rèn)值為，表示立刻滾到底即表示平滑滾動。這時對錨點內(nèi)鏈觸發(fā)的視口滾動同樣有效。它接受兩種形式的值布爾值或?qū)ο?。接受布爾值主要還是為了兼容不支持平滑滾動老版的瀏覽器。表示行內(nèi)元素排列方向要滾動到的位置。經(jīng)常有這樣的需求：點擊一個鏈接（內(nèi)鏈）跳轉(zhuǎn)到當(dāng)前頁面中間某個部分。對于這樣的需求，很容易想到使用錨點實現(xiàn)。但有一個問題：滾動一步到位，太生硬了。我還是比較喜歡平滑滾動。HTML5 中提...

darkbug 2019-08-22 13:49 評論0 收藏0
導(dǎo)航欄固定、錨點平滑滾動

摘要：頁面用的框架頁面布局導(dǎo)航導(dǎo)航一導(dǎo)航二導(dǎo)航三導(dǎo)航四導(dǎo)航欄固定頁面滾動時導(dǎo)航欄高亮顯示方案一為頁面添加頁面滾動監(jiān)聽事件滾動條距離頂端值滾動條距離頂端值加循環(huán)距離頂端值判斷滾動條位置清除類頁面用的Bootstrap框架頁面布局 Toggle navigation ...

Michael_Lin 2019-08-02 16:12 評論0 收藏0