点击 回到顶部

使用scrollTop实现 根据网页的滚动高度，判断是否显示回到顶部按钮。

1：vue 中使用

<div>
  <p @click="backtop">回到顶部<p>
</div>

<script>
  export default {
    mounted() {
       window.addEventListener("scroll",this.showbtn,true);
    },
    methods: {
        // 显示回到顶部按钮
       showbtn(){
          let that = this;
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          that.scrollTop = scrollTop
       },
      /**
        * 回到顶部功能实现过程：
        * 1. 获取页面当前距离顶部的滚动距离（虽然IE不常用了，但还是需要考虑一下兼容性的）
        * 2. 计算出每次向上移动的距离，用负的滚动距离除以5，因为滚动的距离是一个正数，想向上移动就是做一个减法
        * 3. 用当前距离加上计算出的距离，然后赋值给当前距离，就可以达到向上移动的效果
        * 4. 最后记得在移动到顶部时，清除定时器
      */
      backtop(){
          var timer = setInterval(function(){
            let osTop = document.documentElement.scrollTop || document.body.scrollTop;
            let ispeed = Math.floor(-osTop / 5); 
            document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
            this.isTop = true;
            if(osTop === 0){
              clearInterval(timer);
            }
          },30)
      }
    }
  }
</script>

2：使用锚点实现

<div>
  <a href="#top">回到顶部</a>  // 这个方法就是为 href 赋值，实现功能
</div>

3：使用 jQuery 实现 引入jQuery 框架

<div>
  <p id="backtop">回到顶部</p>
</div>

<script>
   function backtop(minHeight){
      // 获取页面最小高度，如果没有传入值就默认600
      minHeight ? minHeight = minHeight : minHeight = 600
      // 为当前页面绑定滚动事件
      $(window).scroll(function() {
        // 获取页面滚动高度
        let osTop = $(window).scrollTop();
        // 如果滚动高度大于页面视口高度，就渐显图标，否则就渐隐图标
        if(osTop > minHeight){
          $("#backtop").fadeIn(500);
        }else {
          $("#backtop").fadeOut(500);
        }
      })
      // 定义回到顶部动画
     $("#backtop").click(
        function(){$('html,body').animate({scrollTop:'0px'},'slow');
     )}
</script>