Javascript緩動(dòng)（平滑）回到頂部效果

jsdt 發(fā)布于2019-08-23 16:17 / 905人閱讀

提供時(shí)間精確的，流暢的頁(yè)面緩動(dòng)回到頂部效果（Demo）。

/**
 * Scroll to top.
 * @param    {number}    duration    Duration of the animation
 */
function scrollToTop(duration = 750) {
    // More easeing-function: https://github.com/cferdinandi/smooth-scroll
    let easeingFunction = t => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
    let originScrollY = pageYOffset;
    let originScrollX = pageXOffset; // Keep abscissa
    let originTime = Date.now();
    let passedTime = 0;
    let _scrollToTop = () => {
        if (passedTime < duration) {
            passedTime = Date.now() - originTime;
            requestAnimationFrame(_scrollToTop);
            scrollTo(originScrollX, originScrollY * (1 - easeingFunction(passedTime / duration)));
        }
    };
    _scrollToTop();
}

GPU云服務(wù)器云服務(wù)器回到頂部網(wǎng)頁(yè)回到頂部回到頂部按鈕 html 回到頂部

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/102861.html

相關(guān)文章

Javascript緩動(dòng)（平滑）回到頂部效果

提供時(shí)間精確的，流暢的頁(yè)面緩動(dòng)回到頂部效果（Demo）。 /** * Scroll to top. * @param {number} duration Duration of the animation */ function scrollToTop(duration = 750) { // More easeing-function: https://githu...

URLOS 2019-08-02 16:08 評(píng)論0 收藏0
完美實(shí)現(xiàn)一個(gè)“回到頂部”

摘要：在瀏覽器中，頁(yè)面默認(rèn)滾動(dòng)是在標(biāo)簽上，移動(dòng)端大多數(shù)在標(biāo)簽上，在我們想要實(shí)現(xiàn)平滑回到頂部，只需在這兩個(gè)標(biāo)簽上都加上準(zhǔn)確的說(shuō)，寫(xiě)在容器元素上，可以讓容器非鼠標(biāo)手勢(shì)觸發(fā)的滾動(dòng)變得平滑，而不局限于，標(biāo)簽。前言在實(shí)際應(yīng)用中，經(jīng)常用到滾動(dòng)到頁(yè)面頂部或某個(gè)位置，一般簡(jiǎn)單用錨點(diǎn)處理或用js將document.body.scrollTop設(shè)置為0，結(jié)果是頁(yè)面一閃而過(guò)滾到指定位置，不是特別友好。我們想要...

layman 2019-08-29 17:08 評(píng)論0 收藏0
完美實(shí)現(xiàn)一個(gè)“回到頂部”

摘要：在瀏覽器中，頁(yè)面默認(rèn)滾動(dòng)是在標(biāo)簽上，移動(dòng)端大多數(shù)在標(biāo)簽上，在我們想要實(shí)現(xiàn)平滑回到頂部，只需在這兩個(gè)標(biāo)簽上都加上準(zhǔn)確的說(shuō)，寫(xiě)在容器元素上，可以讓容器非鼠標(biāo)手勢(shì)觸發(fā)的滾動(dòng)變得平滑，而不局限于，標(biāo)簽。前言在實(shí)際應(yīng)用中，經(jīng)常用到滾動(dòng)到頁(yè)面頂部或某個(gè)位置，一般簡(jiǎn)單用錨點(diǎn)處理或用js將document.body.scrollTop設(shè)置為0，結(jié)果是頁(yè)面一閃而過(guò)滾到指定位置，不是特別友好。我們想要...

littlelightss 2019-08-23 12:36 評(píng)論0 收藏0
【前端優(yōu)化】動(dòng)畫(huà)幾種實(shí)現(xiàn)方式總結(jié)和性能分析

摘要：備注沒(méi)整理格式，抱歉動(dòng)畫(huà)實(shí)現(xiàn)的幾種方式性能排序?qū)崿F(xiàn)方式自身調(diào)用調(diào)用的定時(shí)器值推薦最小使用的原因即每秒幀為什么倒計(jì)時(shí)動(dòng)畫(huà)一定要用而避免使用兩者區(qū)別及引發(fā)的線(xiàn)程討論線(xiàn)程討論為什么單線(xiàn)程是的一大特性。備注：沒(méi)整理格式，抱歉動(dòng)畫(huà)實(shí)現(xiàn)的幾種方式：性能排序js < requestAnimationFrame 3->4->2. 那么在來(lái)看你這段代碼。 var t = true; window...

IamDLY 2019-08-23 15:35 評(píng)論0 收藏0
JavaScript 進(jìn)階知識(shí) - 特效篇(一)

摘要：之前是一個(gè)全局變量，如果不獨(dú)立，頁(yè)面只有一個(gè)定時(shí)器在運(yùn)作。這時(shí)的判斷條件應(yīng)該是目標(biāo)距離與盒子目前距離之間差的絕對(duì)值大于等于一步距離絕對(duì)值的時(shí)候，讓他們執(zhí)行否則的話(huà)清除清除定時(shí)器，并將最后的距離直接設(shè)置為的距離。 showImg(https://segmentfault.com/img/remote/1460000012623412?w=1920&h=1080); JS特效前言經(jīng)過(guò)前...

curlyCheng 2019-08-21 18:27 評(píng)論0 收藏0