三種方式實現平滑滾動頁面到頂部的功能

seanlook 發布于2019-08-29 18:42 / 2986人閱讀

摘要：背景最近開發公司的公眾號，做了一個點擊滾動到頂部的功能。但是作為一個攻城獅，怎么可能對自己要求這么低，所以我給自己加了個需求，實現平滑滾動頁面到頂部的功能。使用我們都知道，通過傳入文檔中的，軸坐標來實現滾動到頁面某個位置的功能。

背景

最近開發公司的公眾號H5，做了一個點擊icon滾動到頂部的功能。實現功能比較簡單，直接調用window.scrollTo(0, 0)，一行代碼完成。但是作為一個攻城獅，怎么可能對自己要求這么低，所以我給自己加了個需求，實現平滑滾動頁面到頂部的功能。經過調研和查看文檔，有了以下三種方案。

1.使用CSS

完成功能的最高境界，只用CSS就搞定。代碼如下：

html {
    scroll-behavior: smooth;
}

該樣式的作用是為有滾動條的元素指定一個滾動的行為，但是只有在當用戶手動導航或者 CSSOM scrolling API觸發滾動的時候生效，不影響用戶行為產生的滾動。就在我慶祝的時候，打開can i use看了下兼容性：

日了狗，還是老老實實用JS實現吧。

2.使用Window.scrollTo API

我們都知道window.scrollTo(x, y)，通過傳入文檔中的x，y軸坐標來實現滾動到頁面某個位置的功能。這個API其實還可以傳入一個option，是一個對象，left值對應坐標中的x，top對應坐標中的y，還有一個值為behavior，可以讓你自定義滾動行為，然后我們這樣來實現滾動到頂部:

window.scrollTo({
    left: 0,
    top: 0,
    behavior: "smooth"
})

真香，搞定。過了幾天，產品經理扛著5米大刀來找我，說在Safari上滾動效果奇怪，體檢極差。于是我默默打開了MDN文檔，滾動到底部：

看到了這張圖，雖然API瀏覽器都幾乎支持，但是option選項在Safari上直接掛掉，于是我又打開了stackoverflow，總結了終極方案。

3.使用requestAnimationFrame

經常能看到大名鼎鼎的requestAnimationFrame，但是沒機會用上，這次可以嘗嘗鮮了。我們知道requestAnimationFrame的作用就是告訴瀏覽器在下次重繪之前執行傳入的回調函數，這個行為是瀏覽器自動幫你做的。于是有了如下代碼:

const scrollToTop = () => {
    let sTop = document.documentElement.scrollTop || document.body.scrollTop
    if (sTop > 0) {
        window.requestAnimationFrame(scrollToTop)
        window.scrollTop(0, sTop - sTop / 8)
    }
}

Done！??！Perfect?。。∪杠S的同時，我還是打開了can i use查看了requestAnimationFrame的兼容性：

晚上吃雞?。?！

云服務器 GPU云服務器 jquery滾動到頂部關于頁面彈框功能實現視圖平滑滾動 js平滑滾動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114515.html

三種方式實現平滑滾動頁面到頂部的功能

摘要：背景最近開發公司的公眾號，做了一個點擊滾動到頂部的功能。但是作為一個攻城獅，怎么可能對自己要求這么低，所以我給自己加了個需求，實現平滑滾動頁面到頂部的功能。使用我們都知道，通過傳入文檔中的，軸坐標來實現滾動到頁面某個位置的功能。背景最近開發公司的公眾號H5，做了一個點擊icon滾動到頂部的功能。實現功能比較簡單，直接調用window.scrollTo(0, 0)，一行代碼完成。但是...

amuqiao 2019-08-23 17:04 評論0 收藏0
完美實現一個“回到頂部”

摘要：在瀏覽器中，頁面默認滾動是在標簽上，移動端大多數在標簽上，在我們想要實現平滑回到頂部，只需在這兩個標簽上都加上準確的說，寫在容器元素上，可以讓容器非鼠標手勢觸發的滾動變得平滑，而不局限于，標簽。前言在實際應用中，經常用到滾動到頁面頂部或某個位置，一般簡單用錨點處理或用js將document.body.scrollTop設置為0，結果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

layman 2019-08-29 17:08 評論0 收藏0
完美實現一個“回到頂部”

摘要：在瀏覽器中，頁面默認滾動是在標簽上，移動端大多數在標簽上，在我們想要實現平滑回到頂部，只需在這兩個標簽上都加上準確的說，寫在容器元素上，可以讓容器非鼠標手勢觸發的滾動變得平滑，而不局限于，標簽。前言在實際應用中，經常用到滾動到頁面頂部或某個位置，一般簡單用錨點處理或用js將document.body.scrollTop設置為0，結果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

littlelightss 2019-08-23 12:36 評論0 收藏0
微信里面防止下拉"露底"組件

摘要：從本人這兩個月移動實踐的經驗來看，微信的里面和的滑動效果無論是在安卓還是下的體驗都很一般，有明顯的卡頓現象，在安卓下面還會出現滑動過快的時候在頁面停下來之后滾動條才閃到相應位置的現象。前言在微信里面瀏覽頁面的時候，有一個很管用的方法可以區分這個頁面是原生的還是H5形式的。隨便打開一個頁面，用力往下扯的時候，如果頁面上方出現了黑底，黑底上有一行諸如網頁由game.weixin.qq....

hot_pot_Leo 2019-08-21 10:41 評論0 收藏0
[js常用]頁面滾動的頂部,指定位置或底部,平滑滾動

摘要：平滑滾動到頂部底部指定地方平滑滾動到頂部底部指定地方這部分是產品介紹這部分是產品介紹這部分是產品介紹這部分是產品介紹這部分是產品介紹返回頂部產品介紹滑到底部js平滑滾動到頂部、底部、指定地方 DOCTYPE html> js平滑滾動到頂部、底部、指定地方 .box{ height:200px; width:100%; backgro...

番茄西紅柿 2019-04-23 13:08 評論0 收藏0