原生js返回顶部动画效果怎么实现？

项目背景：最近在做一个网站页面的改版，有一个返回顶部的功能需求，考虑怎么才能有更好一点的用户体验。

建议使用第二种实现方法

1. 第一种实现方法

转载 https://www.cnblogs.com/JosephBee/p/7326556.html

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
document.body.style.marginTop = -scrollTop + "px";
document.body.scrollTop = 0;
document.body.style.transition = "all 1s ease-in-out";
document.body.style.marginTop = 0;
setTimeout(function() {
   
     document.body.style.transition = 'none';
}, 1000);

出现的问题:

返回之前的body没有任何style,返回之后出现style内联样式

解决方法：

setTimeout(function() {
   
        document.body.removeAttribute("style");
}, 1000);

不足：

1. 这种实现方法会把滚动条直接滚动到顶部用户体验不如第二种好。
2. 这种实现方法如果body存在自己的内联样式就会造成样式错乱。

第二种实现方法

转载 https://www.jb51.net/article/84967.htm

//页面加载后触发
window.onload = function(){
   
  var btn = document.getElementById('btn');
  var timer = null;
  var isTop = true;
  //获取页面可视区高度
  var clientHeight = document.documentElement.clientHeight;
  //滚动条滚动时触发
  window.onscroll = function() {
   
  //显示回到顶部按钮
    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (osTop >= clientHeight) {
   
      btn.style.display = "block";
    } else {
   
      btn.style.display = "none";
    };
  //回到顶部过程中用户滚动滚动条，停止定时器
    if (!isTop) {
   
      clearInterval(timer);
    };
    isTop = false;
  };
 
  btn.onclick = function() {
   
    //设置定时器
    timer = setInterval(function(){
   
      //获取滚动条距离顶部高度
      var osTop = document.documentElement.scrollTop || document.body.scrollTop;
      var ispeed = Math.floor(-osTop / 7);
       
      document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
      //到达顶部，清除定时器
      if (osTop == 0) {
   
        clearInterval(timer);
      };
      isTop