Javascript緩動（平滑）回到頂部效果

URLOS 發布于2019-08-02 16:08 / 3447人閱讀

提供時間精確的，流暢的頁面緩動回到頂部效果（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云服務器回到頂部網頁回到頂部回到頂部按鈕 html 回到頂部

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

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

Javascript緩動（平滑）回到頂部效果

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

jsdt 2019-08-23 16:17 評論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
【前端優化】動畫幾種實現方式總結和性能分析

摘要：備注沒整理格式，抱歉動畫實現的幾種方式性能排序實現方式自身調用調用的定時器值推薦最小使用的原因即每秒幀為什么倒計時動畫一定要用而避免使用兩者區別及引發的線程討論線程討論為什么單線程是的一大特性。備注：沒整理格式，抱歉動畫實現的幾種方式：性能排序js < requestAnimationFrame 3->4->2. 那么在來看你這段代碼。 var t = true; window...

IamDLY 2019-08-23 15:35 評論0 收藏0
JavaScript 進階知識 - 特效篇(一)

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

curlyCheng 2019-08-21 18:27 評論0 收藏0