Vue路由跳转定位顶部（自动/手动）

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>

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