Involving knowledge points:
the window.scrollTo (X, Y) requestAnimationFrame (() => {}) // frame animation, advantages: by the refresh renderer browser, more smooth. Features: Similar to setTimeout executes only once
What is not said on the code:
num is the position to be reached, the digital type. Call: this.transitionScroll (100)
transitionScroll = (num) => { const n = window.pageYOffset; if(num < n) { this.ScrollDown(num) } if(num > n) { this.ScrollUp(num) } } ScrollDown = (num) => { const sensitivity = 5; //灵敏度 window.requestAnimationFrame(() => { const n = window.pageYOffset; const Dvalue = Math.abs(num - n); if (num > n + sensitivity) { window.scrollTo(0, n + parseInt(Dvalue / sensitivity)) this.ScrollDown(num) } }) } ScrollDown = (num) => { const sensitivity = 5; window.requestAnimationFrame(() => { const n = window.pageYOffset; const Dvalue = Math.abs(num - n); if (num < n - sensitivity) { window.scrollTo(0, n - parseInt(Dvalue / sensitivity)) this.ScrollDown(num) } }) }