Click the button to return to the top smoothly

Preface

In the development process , There must be operations that need to return to the top , Many people will go straight back to the top , It's like jumping , Greatly reduced the experience , The following code can make your return top become silky .

Realization

Whether it's original or not , still vue、react, This method is applicable , Directly copy it into the method

//  To the top completion time  0.5 second 
let finished_time = 500;
//  Every time 0.01 Move upward once every second 
let interval_time = 10;
//  The distance from the current position to the top 
let scrollTop = window.pageYOffset;
//  Calculate how many pixels to slide up each interval 
let top_pixel = scrollTop / finished_time * interval_time;
//  Slide the interval upward through the timer 
let timer = setInterval(() => {
    
  scrollTop -= top_pixel;
  //  It's a negative number , The browser will not handle 
  window.scrollTo(0, scrollTop);
  if (scrollTop <= 0) {
    
    clearInterval(timer)
  }
}, interval_time)