JS操作滾動條置頂+動畫效果

一、最實用方法：

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

調用 scrollTo 方法，並設置 behavior 動畫效果。等同於自己手動設置元素的 scrollTop = 0 

window.scrollTo 說明：

語法1: 

　window.scrollTo(x-coord,y-coord)

• x-coord 是文檔中的橫軸座標。
• y-coord 是文檔中的縱軸座標。

語法2：

　window.scrollTo(options)

• top 等同於  y-coord
• left 等同於  x-coord
• behavior  類型String,表示滾動行爲,支持參數 smooth(平滑滾動),instant(瞬間滾動),默認值auto,實測效果等同於instant

More：

scroll()  此方法接收兩個參數，依次爲X座標和Y座標；設置滾動條的偏移位置

scrollTo() 此方法和scroll()作用一樣，都是設置滾動條的偏移位置。

scrollBy() 此法發同樣接收兩個參數，不過參數分別爲X軸的偏移量和Y軸的偏移量，並且可以增加或者減少。

轉自：原生js 平滑滾動到頁面的某個位置

 

二、最粗暴的方法：

window.scrollTop = 0;

直接設置滾動條高度爲0，該方法效果比較突兀，體驗不好。

 

三、自定義方法：

const ScrollTop = (number = 0, time) => {
    if (!time) {
        document.body.scrollTop = document.documentElement.scrollTop = number;
        return number;
    }
    const spacingTime = 20; // 設置循環的間隔時間  值越小消耗性能越高
    let spacingInex = time / spacingTime; // 計算循環的次數
    let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 獲取當前滾動條位置
    let everTop = (number - nowTop) / spacingInex; // 計算每次滑動的距離
    let scrollTimer = setInterval(() => {
        if (spacingInex > 0) {
            spacingInex--;
            ScrollTop(nowTop += everTop);
        } else {
            clearInterval(scrollTimer); // 清除計時器
        }
    }, spacingTime);
};

該方法支持向上和向下滾動

// 滾動到距離頁面頂部500px的位置 動畫時間爲200ms

ScrollTop(500, 200);

轉自：原生JS實現滾動條動畫 （滾動到指定位置 / 返回頂部）

 

之前的相關鏈接：extjs/jquery/js 操作頁面滾動條