原生javascript如何实现回到顶部平滑滚动?

发布网友

我来回答

共3个回答

热心网友

// 设置准备要滚动的元素
let p = document.getElementById('userDetailContent').parentNode;
// 该元素目前 顶部 被卷起(隐藏)的高度
let t = p.scrollTop;
// 这段匀速运动 分30步来走, step:每一步走的距离
let step = Math.floor(t / 30);
if( step > 1)  //一步最少要走1个像素,否则无限触发滚动
    (function walkTop(t) {
        setTimeout(()=>{
            // scrollTo( x轴滚动, y轴)
            p.scrollTo(0, t -= step); // 走一步, 将剩余路程 减去一步的路程的结果
            if(t<0) return; // 停止迭代循环
            walkTop(t);//迭代
        },1);// 每毫秒走一步
    })(t); // 自执行函数 传入参数t ,!important

热心网友

function rt() {
    var d = document,
        dd = document.documentElement,
        db = document.body,
        top = dd.scrollTop || db.scrollTop,
        step = Math.floor(top / 20);
       (function() {
           top -= step;
           if (top > -step) {
               dd.scrollTop == 0 ? db.scrollTop = top: dd.scrollTop = top;
               setTimeout(arguments.callee, 20);
           }
       })();
}

目前只能用脚本来实现平滑滚动，十多行代码，不是很麻烦。

追答代表这个函数立即执行，另外这种闭包形式可以保持对上一级局部变量的引用。当然也可以改成普通的函数形式。

热心网友

都是这思路的 不麻烦吧 jQuery也不简单