前端 回到顶部功能按钮

方法一

利用elementUI 中的回到顶部按钮的方法

<div class="goTop">
	<el-backtop target=".goTop" :bottom="100" >
	</el-backtop>
</div>

//css
.goTop{
    height: 100vh;
    overflow-x: hidden;
}

方法二

vue 监听滑动距离，显示回到顶部按钮

<div class='button_boxlt'>
     <img src="../../images/回顶部@2x.png" alt="" v-show="toTopShow" @click="TopBotton">
 </div>

  data() {
        return {
        toTopShow:false
        }
  },
  mounted() {
    this.$nextTick(function() {
      //修改事件监听
      window.addEventListener("scroll", this.handleScroll);
    });
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },

    TopBotton() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      let timer = setInterval(() => {
          scrollTop -= 100;
          window.scrollTo(0, scrollTop)
          if (scrollTop <= 0) {
              clearInterval(timer)
          }
      }, 16.7)
    },
    handleScroll() {
      this.scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.scrollTop > 300) {
        this.toTopShow = true;
      } else {
        this.toTopShow = false;
      }
    },

方法三

JS实现点击返回顶部动画

<button id="btn" onclick="toTOp()">返回顶部</button>

 body {
            height: 3000px;
        }
        * {
            padding: 0;
            margin: 0;
        }
        #btn {
            position: fixed;
            bottom: 50px;
            right: 50px;
            display: none;
        }

  let btn = document.getElementById("btn");
    window.onscroll = function () {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//兼容IE
        if (scrollTop > 1080) {
            btn.style.display = "block"
        } else {
            btn.style.display = "none"
        }
    }

    function toTOp() {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let timer = setInterval(() => {
            scrollTop -= 100;
            window.scrollTo(0, scrollTop)
            if (scrollTop <= 0) {
                clearInterval(timer)
            }
        }, 16.7)
    }

本文参考 https://www.jianshu.com/p/fa46915bf87b https://www.jianshu.com/p/ec130d86678c