jQuery實(shí)現(xiàn)平滑滾動(dòng)到指定錨點(diǎn)的方法

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

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107484.html

相關(guān)文章

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

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

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

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

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

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

tianhang 2019-08-29 13:13 評(píng)論0 收藏0
scrollIntoView 與平滑滾動(dòng)

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

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

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

Michael_Lin 2019-08-02 16:12 評(píng)論0 收藏0