纯 JS 回到顶部

浏览器中控制滚动条高度的是scrollTo方法,它接受两个参数,分别是相对左上角xy轴滚动的像素。scrollTo(0, 0)就能回到顶部,但这个方法是直接跳到顶部的,所以我们还需要一个动画效果来实现scrollY到0的平滑滚动。

这里我们采用 0-Pi 上的余弦平方曲线(1-cos(x))^2,来模拟贝塞尔曲线的效果。

屏幕快照 2018-05-05 下午2.12.22.png
屏幕快照 2018-05-05 下午2.12.22.png

window.scrollY表示文档在垂直方向已滚动的像素值。所以我们通过scrollY获取滚动条的初始高度,用1/4余弦平方曲线计算每一帧的滚动条需要到达的高度。通过requestAnimationFrame在30帧后到达顶部。

下面为代码实现:

function scrollTop(duration = 30) {
    let stepCount = 0;
    const initialPosition = scrollY;
    const stepPI = Math.PI / duration;
    requestAnimationFrame(step);

    function step() {
        if (stepCount < duration) {
            requestAnimationFrame(step);
            stepCount++;
            scrollTo(0, initialPosition * 
                        (1 - 0.25 * Math.pow((1 - Math.cos(stepPI * stepCount)), 2)));
        }
    }
}

参考文章: Animated onclick scroller in pure JS

❤️
Built with Hugo
Theme Stack designed by Jimmy