一键返回顶部优化

---

前言

优化一键返回顶部

---

1.template

代码如下（示例）：

</div>
    <img class="footer none" id="gotoTop" @click="tops" src="../assets/img/返回顶部.jpg" alt>
  </div>

2.script

代码如下（示例）：

function gotoTop(minHeight) {
 //距离为40是出现一键返回
  minHeight ? (minHeight = minHeight) : (minHeight = 40);

  // 为窗口的节流事件绑定处理函数
  $(window).scroll(function() {
    // 获取窗口的滚动条的垂直滚动距离
    var s = $(window).scrollTop();
   // 滚动一段距离，返回顶部渐现，否则渐隐
    if (s > minHeight) {
     //渐隐时间为0.5秒
      $("#gotoTop").fadeIn(500);
    } else {
      $("#gotoTop").fadeOut(500);
    }
  });
}
gotoTop();

该处使用的url网络请求的数据。

3.methods

//一键返回缓慢 置顶
    tops() {
      //使得返回顶部过渡置增加交互效果
      var timer = setInterval(
        () =>
          document.documentElement.scrollTop <= 0
            ? clearInterval(timer)
            : window.scrollTo(0, document.documentElement.scrollTop - 10)//数值越大速度越快
      );
    },

4.destroyed

clearInterval(this.timer);

---

总结

一键返回     40px激活    0.5秒   缓慢出现    滚动回顶