本文例項為大家分享了vue實現移動端返回頂部的具體程式碼，供大家參考，具體內容如下

HTML:

<template>
 <div class="home">
  <div v-for="ys in 100" :key="ys">
   <p>1</p>
  </div>
  <div @click="back" class="back1" v-show="isShow">▲</div>
 </div>
</template>

JS:

<script>
export default {
 data() {
  return {
   isShow: true
  };
 },handleScroll() {// handleScroll 和 methods 是同級
   if (window.pageYOffset > 300) {
    //window.pageYOffset:獲取滾動距離
    this.isShow = true;
   } else {
    this.isShow = false;
   }
   // console.log(window.pageYOffset);
  },methods: {
  //點選事件：
  back() {
   //返回頂部 $這個地方需要引入線上jq
   //<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   $("html")
    .stop()
    .animate(
     //animate：動畫 點選時讓它行動
     {
      scrollTop: 0 //距離頂部為0
     },1000 //多少時間完成行動
    );
  }
 }
};
</script>

CSS:

<style scoped>
.back1 {
 width: 50px;
 height: 50px;
 background: #eee;
 position: fixed;
 right: 5px;
 bottom: 50px;
 z-index: 1000;
 text-align: center;
 line-height: 50px;
}
</style>

之前小編看到的一篇文章分享給大家：Vue實現返回頂部按鈕

<template>
 <div class="scrollTop">
  <div class="backTop"
      @click="backTop">
    <button v-show="flag_scroll">
          返回頂部
    </button>
   </div>
   //資料來源
   <div></div>
  </div>
</template>  
<script>
export default {
 name: 'scrollTop',data() {
  return {
 
   flag_scroll: false,scroll: 0,}
 },computed: {},methods: {
 //返回頂部事件
  backTop() {
   document.getElementsByClassName('scrollTop')[0].scrollTop = 0
  },//滑動超過200時顯示按鈕
  handleScroll() {
   let scrollTop = document.getElementsByClassName('scrollTop')[0]
    .scrollTop
    console.log(scrollTop)
   if (scrollTop > 200) {
    this.flag_scroll = true
   } else {
    this.flag_scroll = false
   }
  },},mounted() {
  window.addEventListener('scroll',this.handleScroll,true)
 },created() { },}
</script>

<style scoped>
.scrollTop{
 width: 100%;
 height: 100vh;
 overflow-y: scroll;
}
.backTop {
 position: fixed;
 bottom: 50px;
 z-index: 100;
 right: 0;
 background: white;
}
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。