酒浓码浓 - JS缓冲效果,平滑移动（滚动条平滑滚动）

JS缓冲效果,平滑移动（滚动条平滑滚动）

举个栗子：

点击导航栏的锚点，改变scroll的位置。（页面不是瞬间闪到，有个缓冲的效果）

点击button，页面瞬间闪到目标位置，这个功能很简单，不再啰嗦

效果很生硬，那我现在要加个缓冲，让它慢慢平滑过去。

jquery实现：用一个animate 后面参数给个时间就可简单实现。

JS实现：例：一个简单的点击导航栏不同的li ，平滑改变当前页面scroll不同位置

这是我用react项目写的，掺杂了一些react语法，但原理一样

const top= document.getElementById(name).offsetTop;

    //获取到这个标签，且算出其距离页面顶部距离

let timer =null;

    //设个 定时器

clearInterval(timer);

    //每次执行时 先清一下之前的定时器

    if(this.state.speedOver){

        //设个开关（执行完上次任务才能再次执行） 不设置快速连续点击不同的li强行改变会出bug

        timer=setInterval(()=>{

            //开始定时器

            let speed= (top-window.pageYOffset)/2;

            //加速度（目标距顶部的距离 - 此时滚动条距顶部的距离）

            speed= speed>0?Math.ceil(speed):Math.floor(speed);

            //大于零向上取整，小于向下取整

            if(window.pageYOffset==top){

                //当目标距顶部的距离 = 此时滚动条距顶部的距离

                clearInterval(timer);

                //证明时间完成，清除定时器

                this.setState({ speedOver:true });

                //打开开关，可以进行下次事件了

            }else{

    document.documentElement.scrollTop=document.body.scrollTop=window.pageYOffset+speed;

    this.setState({ speedOver:false });

    //否则，window.pageYOffset和speed会不断的改变

    //直至到目标处位置 此时的开关是一直保持关闭的

}

},30)

}

//想要改变scroll平滑跳转的快慢，调上方的 /2