vue项目回到顶部的两种超简单实现方法

　　目录

　　vue 中实现回到顶部的两种方式：

　　（1）锚点方式

　　通过点击锚点回到指定位置：

　　样式：

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

　　附：vue实现刷新页面，页面回到顶部

　　使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。

　　const router = createRouter({

　　history: createWebHashHistory(),

　　routes: [...],

　　scrollBehavior (to, from, savedPosition) {

　　// return 期望滚动到哪个的位置

　　// vue2.0 x y 控制

　　// vue3.0 left top 控制

　　return { left: 0, top: 0 } }

　　})

　　在main.js中加

　　router.afterEach((to,from,next)=>{

　　window.scrollTo(0,0);

　　})

　　总结

　　到此这篇关于vue项目回到顶部的两种超简单实现方法的文章就介绍到这了,更多相关vue项目回到顶部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

　　您可能感兴趣的文章: