一个小demo:点击让滚动条缓慢滚动到指定的位置

我在写项目的时候遇到一个需求：点击某元素时，页面滚动到指定的某页面元素位置。实现过程非常简单：

//首先获取该元素在页面的位置：
var div = document.getElementById('id');
var x = div.offsetTop;
//然后使页面滚动
window.scrollTo(0,x);

这样的滚动方式是直接一下子跳转过去，显得非常生硬，于是我想到用setInterval()来实现缓慢滚动的效果。

var div = document.getElementById('id');
var x = div.offsetTop;
//让滚动条滚动起来
var timer = setInterval(function () {
    window.scrollBy(0, 20);//每30ms滚动20px的距离，可根据需求微调
}, 30)

//我们通过监听滚动条滚动事件，获取滚动条距离页面定点的距离，当这个距离与我们想要到达的位置吻合时，停止滚动

window.onscroll(function () {
    var distanc = document.body.scrollTop || document.documentElement.scrollTop;
    if (distanc === x) {
        clearInterval(timer);
    }
}, false)

通过以上代码可以实现缓慢滚动的效果。然后我们需要将这两个逻辑封装到一个函数中：

var div = document.getElementById('span'); //获取要达到的dom元素
        var x = div.offsetTop; //获取该dom元素的距离页面顶端的距离
       
        function scrollSlowly(speed, msec) {
            //每次调用该函数，先清一遍定时器，一面出现定时器叠加情况
            clearInterval(timer);
            //产生点击事件是首先判断一下是向上还是向下滚动
            var distance = window.pageYOffset;
            //如果滚动条的位置在制定dom元素的下方，也就是需要向上滚动时：speed取负值，向上滚动，反之取正值，向上滚动
            speed = distance <= x ? speed : -speed
            
            var timer = setInterval(function () {
                window.scrollBy(0, speed); //每msec滚动speed的距离，可根据需求微调
            }, msec);

            //判断何时停止
            window.onscroll = function () {
                var distance1 = window.pageYOffset;
                var y = distance1-x;
                console.log(y)
                if (y >=-5 && y<=5) {//设置停止定时器的区间
                    clearInterval(timer);
                }
            }
        }

封装完成，如果对你有用，点个赞吧，谢谢了！