如何用javascript實(shí)現(xiàn)置頂

這篇文章主要講解了“如何用javascript實(shí)現(xiàn)置頂”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何用javascript實(shí)現(xiàn)置頂”吧！

javascript實(shí)現(xiàn)置頂?shù)姆椒ǎ?、通過getBoundingClientRect獲取元素到瀏覽器視窗頂部的距離；2、通過“$(document).scrollTop() for(...)”方法實(shí)現(xiàn)置頂功能即可。

本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

JavaScript實(shí)現(xiàn)置頂功能

JavaScript實(shí)現(xiàn)置頂功能的方式有很多，之前也用過一些， 感覺比較復(fù)雜吧，自己最近做的東西需要，因此也在網(wǎng)上找了些資料，最后找到一個(gè)方法 getBoundingClientRect() 可以獲取頁(yè)面元素到瀏覽器視窗頂部的距離。

最后代碼如下：

let len = document.getElementById('flexbox').getBoundingClientRect().top;//獲取元素到瀏覽器視窗頂部的距離
//$(document).scrollTop()為滾動(dòng)條的高度
        for (let i = $(document).scrollTop(); i < len + $(document).scrollTop(); i++) {
            setTimeout(function () {
                window.scrollTo(0, i);
            }, 0)
        }

用循環(huán)的目的主要是使得元素置頂?shù)臅r(shí)候不突兀，這個(gè)過程可以通過改變i++來實(shí)現(xiàn)，同時(shí)需要注意一點(diǎn)，如果for語(yǔ)句用的是var i 而不是let i,定時(shí)器則需要用立即執(zhí)行函數(shù)包裹來保證i能立馬生效。

用這種方式實(shí)現(xiàn)的置頂和錨點(diǎn)效果差不多，如果要實(shí)現(xiàn)懸浮置頂（某個(gè)部分固定在頂部），則可以考慮用position:fixed來實(shí)現(xiàn)。

就這樣吧。。。。

感謝各位的閱讀，以上就是“如何用javascript實(shí)現(xiàn)置頂”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)如何用javascript實(shí)現(xiàn)置頂這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！