快捷導(dǎo)航

vue項(xiàng)目回到頂部的兩種超簡(jiǎn)單實(shí)現(xiàn)方法

更新時(shí)間：2023年10月14日 09:14:26 作者：喵喵醬仔__

這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目回到頂部的兩種超簡(jiǎn)單實(shí)現(xiàn)方法,?頁(yè)面切換回到頂部是一個(gè)很常見(jiàn)的功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

（1）錨點(diǎn)方式

通過(guò)點(diǎn)擊錨點(diǎn)回到指定位置：

<template>
	<div id="topAnchor" ref="faultTree" class="wrap">
	    <a id="TOPUp" href="#topAnchor" rel="external nofollow" >
	      <img style="width: 100%;height: 100%;" src="../../../../assets/top.png" alt="">
	    </a>
	    <!--其他業(yè)務(wù)邏輯代碼-->
	    ...
	</div>
</template>

樣式：

<style>
#TOPUp{
  position: fixed;
  right: 45px;
  bottom: 100px;
  width: 40px;
  height: 40px;
  z-index: 99999999;
  box-shadow: 0px 0px 4px 4px #ecefef;
  border-radius: 600px;
}
</style>

（2）scrollTop

通過(guò)點(diǎn)擊事件將scrollTop重置為0，從而達(dá)到返回頂部的效果。

<template>
  <div class="hello_world">
    <button class="top" @click="toTop">^</button>
  </div>
</template>
<script>
export default {
  methods: {
    toTop() {
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>
<style>
.hello_world {
  height: 5000px;
}
.top {
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 50px;
    right: 100px;
    background-color: aqua;
  }
</style>

代碼地址：https://gitcode.net/sinat_33255495/vue

附：vue實(shí)現(xiàn)刷新頁(yè)面，頁(yè)面回到頂部

使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。

vue-router中有一個(gè)滾動(dòng)行為-scrollBehavior ，

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滾動(dòng)到哪個(gè)的位置
    // vue2.0  x  y  控制
    // vue3.0  left  top 控制
	return { left: 0, top: 0 }  }
})

加全局守衛(wèi)

在main.js中加

router.afterEach((to,from,next)=>{
    window.scrollTo(0,0);
})

總結(jié)

到此這篇關(guān)于vue項(xiàng)目回到頂部的兩種超簡(jiǎn)單實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)vue項(xiàng)目回到頂部?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: