快捷導(dǎo)航

Vue實(shí)現(xiàn)返回頂部按鈕實(shí)例代碼

更新時(shí)間：2020年10月21日 11:07:25 作者：今天代碼敲了嗎

這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)返回頂部按鈕的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

本文主要介紹了Vue 實(shí)現(xiàn)返回頂部按鈕的方法，下面話(huà)不多說(shuō)，來(lái)直接看代碼吧

實(shí)例代碼：

<template>
 <div class="scrollTop">
 <div class="backTop"
   @click="backTop">
  <button v-show="flag_scroll">
     返回頂部
  </button>
  </div>
  //數(shù)據(jù)源
  <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
 },
 //滑動(dòng)超過(guò)200時(shí)顯示按鈕
 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>

總結(jié)

到此這篇關(guān)于Vue實(shí)現(xiàn)返回頂部按鈕的文章就介紹到這了,更多相關(guān)Vue返回頂部按鈕內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue.js 的移動(dòng)端組件庫(kù)mint-ui實(shí)現(xiàn)無(wú)限滾動(dòng)加載更多的方法
下面小編就為大家分享一篇Vue.js 的移動(dòng)端組件庫(kù)mint-ui實(shí)現(xiàn)無(wú)限滾動(dòng)加載更多的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
關(guān)于Vue3過(guò)渡動(dòng)畫(huà)的踩坑記錄
在開(kāi)發(fā)中我們想要給一個(gè)組件的顯示和消失添加某種過(guò)渡動(dòng)畫(huà),可以很好的增加用戶(hù)體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于Vue3過(guò)渡動(dòng)畫(huà)踩坑的相關(guān)資料,需要的朋友可以參考下
2021-12-12
詳解vue3中websocket的封裝與使用
這篇文章主要為大家詳細(xì)介紹了vue3中websocket的封裝與使用的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-12-12
vue中$emit的用法詳解
這篇文章主要介紹了vue中$emit的用法詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08
vue3+ts封裝彈窗及封裝分頁(yè)的示例代碼
這篇文章主要介紹了vue3+ts封裝彈窗及封裝分頁(yè)的示例代碼,本文通過(guò)定義defaultDialog .vue,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-08-08
快速了解Vue父子組件傳值以及父調(diào)子方法、子調(diào)父方法
這篇文章主要介紹了Vue父子組件傳值以及父調(diào)子方法、子調(diào)父方法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
vue2.x?el-table二次封裝實(shí)現(xiàn)編輯修改
本文主要介紹了vue2.x?el-table二次封裝實(shí)現(xiàn)編輯修改，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue-cropper 圖片裁剪的基本原理及思路講解
這篇文章主要介紹了Vue-cropper 圖片裁剪的基本原理及思路講解，本文圖文并茂給大家介紹的非常詳細(xì),需要的朋友可以參考下
2018-04-04
vue?雙向綁定問(wèn)題$emit無(wú)效的解決
這篇文章主要介紹了vue?雙向綁定問(wèn)題$emit無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue3之Vite中由element?ui更新導(dǎo)致的啟動(dòng)報(bào)錯(cuò)解決
這篇文章主要介紹了Vue3之Vite中由element?ui更新導(dǎo)致的啟動(dòng)報(bào)錯(cuò)解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01