酒濃碼濃 - 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