Vue路由跳转定位顶部（自动/手动）_The_more_more_vue 路由跳跃拉条定位

未知 02-07 3368

Vue路由跳转定位顶部（自动/手动）背景了解

当我们在做vue项目的时候，使用编程式或者声明式导航跳转的时候，如果页面过长，定位的地方就不是顶部，我们需要拉到顶部去预览，这样就显得十分麻烦。

解决方案 1、自动

我们可以在路由的前置守卫哪里添加代码

router.beforeEach((to, from, next) => { // 兼容chrome document.body.scrollTop = 0 // 兼容firefox document.documentElement.scrollTop = 0 // 兼容safari window.pageYOffset = 0 next() })

或者可以查阅vue router的文档地址，这里针对于vue2.x的，地址信息：<滚动行为 | Vue Router (vuejs.org)>

描述是这样的，在我们生成实例new VueRouter的地方配置选项scrollBehavior，简单代码就是：

let router = new VueRouter({ // 配置路由 routes, scrollBehavior(to, from, savePosition) { // return 期望滚动到哪个的位置 return { y: 0 } } })

你也可以通过 el 传递一个 CSS 选择器或一个 DOM 元素。在这种情况下，top 和 left 将被视为该元素的相对偏移量。

let router = new VueRouter({ // 配置路由 routes, scrollBehavior(to, from, savedPosition) { // 始终在元素 #main 上方滚动 10px return { // 也可以这么写 // el: document.getElementById('main'), el: '#main', top: -10, } }, }) 2、手动

有时候我们需要在一个页面实现缓慢跳转到顶部，举个例子就是在做商品分类页面的分页器，如果页面很长，我们滑到底部点击第二页的时候就可以缓慢回到顶部进行预览。

实现方法：在methods定义一个方法backtop，书写效应的代码

// 回顶部的函数 backtop() { const timer = setInterval(() => { const top = document.documentElement.scrollTop || document.body.scrollTop const speed = Math.floor(-top / 5) document.documentElement.scrollTop = document.body.scrollTop = top + speed if (top === 0) { clearInterval(timer) } }, 20) // 这里是时间 }

在我们切换页面数的时候发起请求，最后调用以上的函数即可，例如：

currentChange(page) { this.Page = page if (this.search != '') { this.getProductBySearch() // 这个函数是通过搜索条件向后端请求商品数据 } else { this.getData() // 这个函数就是axios封装的请求页面数据的函数 } this.backtop() },

这里我们是使用element UI的分页器调用currentChange函数的

<el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="currentChange"> </el-pagination>

编译好之后，运行项目点击不同的页数，浏览器就会缓慢回到顶部方便预览。