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项目回到顶部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
您可能感兴趣的文章:
- .NET Core系列之MemoryCache 初识
- 007手机一键Root(安机网一键Root) v3.0 官方最新版 一键ROOT您的Android手机
- 12306密码被盗了怎么办?12306密码外泄解决方法
- 12个字的qq网名
- 150M迷你型无线路由器怎么设置?
- 192.168.1.1打不开怎么办?路由器192.168.1.1打不开的原因以及解决办法
- 2011年电子报合订本 电子报 编辑部 中文 PDF版 [84M]
- 2015年1月15日小米新旗舰发布会现场图文直播
- 2016.3.1vivo Xplay5新品发布会现场视频直播 优酷直播
- 2016华为P9发布会视频直播地址 4月15日华为P9国行发布会直播