Question

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

目前能想到的只有setInterval() + scrollBy() 方法，感觉比较麻烦
还有其他什么方法吗？

Answer 1

// 设置准备要滚动的元素
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

Answer 2

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);
           }
       })();
}

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

追问

内部的函数为什么在括号里面呢？就是这样的形式：(function(){})()

追答

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

Answer 3

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