vue項目回到頂部的兩種超簡單實現(xiàn)方法
更新時間：2023年10月14日 09:14:26 作者：喵喵醬仔__
這篇文章主要給大家介紹了關于vue項目回到頂部的兩種超簡單實現(xiàn)方法,?頁面切換回到頂部是一個很常見的功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
vue 中實現(xiàn)回到頂部的兩種方式：
（1）錨點方式
通過點擊錨點回到指定位置：
<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è)務邏輯代碼--> ... </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
通過點擊事件將scrollTop重置為0，從而達到返回頂部的效果。
<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實現(xiàn)刷新頁面，頁面回到頂部
使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。
- vue-router中有一個滾動行為-scrollBehavior ，
const router = createRouter({
history: createWebHashHistory(),
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滾動到哪個的位置
// 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é)
到此這篇關于vue項目回到頂部的兩種超簡單實現(xiàn)方法的文章就介紹到這了,更多相關vue項目回到頂部內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在我們的平時的工作中,在前后端交互的時候,為了提高頁面的觀賞性和用戶的體驗,我們會在頁面上添加loading來阻止用戶操作來等待接口的返回,這篇文章主要給大家介紹了關于如何優(yōu)雅的控制全局loading顯示的相關資料,需要的朋友可以參考下2022-01-01
在Vue3項目中實現(xiàn)頁面截圖的功能,可以通過使用js-web-screen-shot組件來實現(xiàn),本文以toolbox.js作為案例,詳細介紹了如何在Vue3框架下,利用js-web-screen-shot組件實現(xiàn)頁面截圖的具體步驟和方法,這一技術的應用,不僅可以提高用戶體驗,還能在需要時方便地獲取頁面的即時信息2024-10-10
Element-UI中<el-cascader?/>回顯失敗問題的完美解決
我們在使用el-cascader控件往數(shù)據(jù)庫保存的都是最后一級的數(shù)據(jù),那如果再次編輯此條數(shù)據(jù)時,直接給el-cascader傳入最后一級的數(shù)據(jù),它是不會自動勾選的,下面這篇文章主要給大家介紹了關于Element-UI中<el-cascader?/>回顯失敗問題的完美解決辦法,需要的朋友可以參考下2023-01-01
vue子組件調(diào)用父組件的方法其實不難,最近整理了一下,下面這篇文章主要給大家介紹了關于Vue中子組件調(diào)用父組件的3種方法,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue組件詳解之使用slot分發(fā)內(nèi)容及Vue組件中slot的用法,需要的朋友可以參考下2018-04-04
vue-router配合ElementUI實現(xiàn)導航的實例
下面小編就為大家分享一篇vue-router配合ElementUI實現(xiàn)導航的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Nuxt.js的路由跳轉(zhuǎn)操作(頁面跳轉(zhuǎn)nuxt-link)
這篇文章主要介紹了Nuxt.js的路由跳轉(zhuǎn)操作(頁面跳轉(zhuǎn)nuxt-link)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本片文章主要寫了，Vue3開發(fā)時運用Vant UI庫的一些避坑點。讓有問題的小伙伴可以快速了解是為什么。也是給自己做一個記錄2023-04-04
這篇文章主要給大家介紹了關于Vue管理系統(tǒng)前端之組件拆分封裝的相關資料，文中通過實例代碼結(jié)束的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-08-08
本篇文章主要介紹了Vue學習之路之登錄注冊實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07