如何利用 Vue Router 的 scrollBehavior 选项，实现一个平滑的滚动到页面顶部或锚点位置的效果？

各位代码界的英雄豪杰，早上好！我是你们的老朋友，今天咱们就来聊聊 Vue Router 里面一个特别有用的选项：scrollBehavior。 别看它名字平平无奇，用好了能让你的网站体验直接起飞，瞬间提升用户幸福感。

咱们今天要攻克的难题是：如何利用 scrollBehavior 实现平滑滚动到页面顶部或者锚点位置？

准备好了吗？ 让我们开始今天的旅程吧！

第一站：认识 scrollBehavior

首先，我们要搞清楚 scrollBehavior 是个什么玩意儿。 简单来说，它就是 Vue Router 提供的一个钩子函数，让你在路由切换的时候可以控制页面的滚动行为。 想象一下，你点击一个链接，页面“嗖”的一下就跳到目的地，是不是有点生硬？ scrollBehavior 就是让你优雅地控制这个“嗖”的过程，让滚动变得平滑自然。

scrollBehavior 接受三个参数：

• to: 目标路由对象，包含了你要跳转到的路由的信息。
• from: 当前路由对象，包含了你从哪个路由跳转过来的信息。
• savedPosition: 可选参数，只有在使用 popstate 导航 (比如浏览器的前进/后退按钮) 时才可用。 它保存了上一次页面的滚动位置。

scrollBehavior 的返回值决定了页面的滚动位置。 它可以返回以下几种类型：

返回值类型	描述
{ x: number, y: number }	滚动到指定坐标。 x 是横向滚动距离， y 是纵向滚动距离。 例如 { x: 0, y: 0 } 表示滚动到页面顶部。
{ selector: string, offset?: { x: number, y: number } }	滚动到指定选择器匹配的元素。 selector 是 CSS 选择器， offset 是可选的偏移量。 例如 { selector: '#app', offset: { x: 0, y: 100 } } 表示滚动到 id 为 app 的元素，并在其上方 100 像素的位置。
undefined 或 false	保持原样滚动。

第二站：配置 scrollBehavior

现在，我们来配置一下 scrollBehavior，让它发挥作用。 打开你的 router/index.js 文件 (或者你存放 Vue Router 配置的文件)，找到 VueRouter 的实例创建部分，添加 scrollBehavior 选项：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  // 你的路由配置
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  scrollBehavior (to, from, savedPosition) {
    // 这里编写你的滚动行为逻辑
  }
})

export default router

第三站：实现滚动到页面顶部

最简单的场景，就是每次路由切换都滚动到页面顶部。 这就像每次打开一本书都从第一页开始看一样，简单粗暴。

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

这段代码的意思是：无论你从哪个路由跳转到哪个路由，都滚动到页面顶部 (x 和 y 坐标都为 0)。

第四站：实现平滑滚动到页面顶部

上面的代码虽然能滚动到顶部，但是少了点灵魂，因为它是瞬间移动过去的，不够优雅。 我们要让它平滑滚动！

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0, behavior: 'smooth' })
    }, 0) // 延迟 0 毫秒，确保 DOM 更新完成
  })
}

这段代码使用了 behavior: 'smooth' 属性，让滚动变得平滑。 为什么要用 setTimeout 延迟 0 毫秒呢？ 这是为了确保在滚动之前，DOM 已经更新完成。 如果不延迟，可能会出现一些奇怪的滚动问题。

第五站：实现滚动到锚点位置

很多时候，我们需要滚动到页面上的某个特定位置，比如锚点。 锚点通常用于长页面，方便用户快速跳转到指定内容。

首先，在你的页面上定义一个锚点。 例如：

<div id="section1">
  <h2>第一部分</h2>
  <p>这里是第一部分的内容...</p>
</div>

<div id="section2">
  <h2>第二部分</h2>
  <p>这里是第二部分的内容...</p>
</div>

然后，在路由配置中，配置带锚点的路由：

const routes = [
  {
    path: '/page',
    component: MyPageComponent
  },
  {
    path: '/page#section2',
    component: MyPageComponent // 或者可以是一个空组件，只用于滚动
  }
]

接下来，修改 scrollBehavior 的代码：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          selector: to.hash,
          behavior: 'smooth',
        })
      }, 0)
    })
  } else {
    return { x: 0, y: 0 } // 滚动到页面顶部
  }
}

这段代码首先判断 to.hash 是否存在。 to.hash 包含了 URL 中的锚点部分 (例如 #section2)。 如果存在，就使用 selector 属性滚动到对应的元素。

第六站：处理浏览器的前进/后退按钮

当用户点击浏览器的前进/后退按钮时，scrollBehavior 会接收到 savedPosition 参数。 savedPosition 包含了上一次页面的滚动位置。 我们可以利用它来恢复之前的滚动状态。

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition // 恢复之前的滚动位置
  } else if (to.hash) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          selector: to.hash,
          behavior: 'smooth',
        })
      }, 0)
    })
  } else {
    return { x: 0, y: 0 } // 滚动到页面顶部
  }
}

这段代码首先判断 savedPosition 是否存在。 如果存在，就直接返回 savedPosition，恢复之前的滚动位置。

第七站：高级用法：自定义偏移量

有时候，我们希望滚动到锚点位置后，再向上或向下偏移一段距离。 比如，我们希望锚点元素上方留出 50 像素的空白。

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          selector: to.hash,
          offset: { x: 0, y: -50 }, // 向上偏移 50 像素
          behavior: 'smooth',
        })
      }, 0)
    })
  } else {
    return { x: 0, y: 0 }
  }
}

这段代码使用了 offset 属性，设置了垂直方向的偏移量为 -50 像素。

第八站：解决滚动冲突

在某些情况下，可能会出现滚动冲突。 比如，你的页面上使用了其他的 JavaScript 库来控制滚动，或者你的 CSS 样式影响了滚动行为。 解决滚动冲突的方法有很多，这里提供一些思路：

• 检查 CSS 样式： 确保你的 CSS 样式没有覆盖或干扰默认的滚动行为。 特别是 overflow 属性，要小心使用。
• 调整 setTimeout 的延迟时间： 如果滚动行为不正确，可以尝试调整 setTimeout 的延迟时间，确保 DOM 更新完成后再进行滚动。
• 使用 requestAnimationFrame： requestAnimationFrame 比 setTimeout 更适合处理动画相关的任务，可以尝试用它来代替 setTimeout。
• 禁用其他滚动控制库： 如果你的页面上使用了其他的滚动控制库，可能会与 scrollBehavior 产生冲突。 尝试禁用这些库，看看是否能解决问题。
• 使用条件判断： 在 scrollBehavior 中添加条件判断，根据不同的路由或页面状态，选择不同的滚动策略。

第九站：代码示例汇总

为了方便大家参考，这里把完整的代码示例汇总一下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  // 你的路由配置
  {
    path: '/page',
    component: () => import('../components/MyPageComponent.vue') // 懒加载组件
  },
  {
    path: '/page#section2',
    component: () => import('../components/MyPageComponent.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition // 恢复之前的滚动位置
    } else if (to.hash) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            selector: to.hash,
            offset: { x: 0, y: -50 }, // 向上偏移 50 像素
            behavior: 'smooth',
          })
        }, 0)
      })
    } else {
      return { x: 0, y: 0, behavior: 'smooth' } // 滚动到页面顶部
    }
  }
})

export default router

第十站：总结与展望

恭喜你，已经成功到达终点站！ 通过今天的学习，你已经掌握了 scrollBehavior 的基本用法和一些高级技巧，可以轻松实现平滑滚动到页面顶部或锚点位置的效果。

scrollBehavior 是一个非常强大的工具，可以大大提升你的网站用户体验。 希望你能在实际项目中灵活运用它，打造出更加流畅、自然的网页体验！

记住，代码的世界没有终点，只有不断学习和探索。 继续加油，成为更优秀的开发者吧！

感谢大家的聆听，下次再见！