当前位置：首页 > VUE

vue实现页面平滑滚动

2026-02-20 23:23:37VUE

Vue 实现页面平滑滚动的方法

在 Vue 中实现平滑滚动可以通过多种方式完成，以下是一些常见的方法：

使用 CSS 的 scroll-behavior 属性

在全局或组件样式中添加以下 CSS 规则，可以轻松实现平滑滚动效果：

html {
  scroll-behavior: smooth;
}

这种方法简单快捷，适用于整个页面的滚动行为调整。但需要注意，某些旧版本浏览器可能不支持此属性。

使用 Vue Router 的 scrollBehavior

在 Vue Router 的配置中添加 scrollBehavior 函数，可以控制路由切换时的滚动行为：

const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        selector: to.hash,
        behavior: 'smooth'
      }
    }
    return { x: 0, y: 0, behavior: 'smooth' }
  }
})

这种方式特别适合单页应用中的锚点跳转和页面切换场景。

使用 JavaScript 的 scrollIntoView 方法

在组件方法中，可以使用原生 DOM 的 scrollIntoView 方法实现平滑滚动：

methods: {
  scrollToElement() {
    const element = document.getElementById('target-element');
    element.scrollIntoView({ behavior: 'smooth' });
  }
}

这种方法提供了更精细的控制，可以针对特定元素进行操作。

使用第三方库

如果需要更复杂的滚动效果，可以考虑使用专门为 Vue 设计的滚动库：

vue-scrollto：专为 Vue 设计的轻量级平滑滚动插件

import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo)

// 在组件中使用
this.$scrollTo('#target', 500, { easing: 'ease-in-out' })

vue2-smooth-scroll：另一个简单的 Vue 平滑滚动解决方案

import SmoothScroll from 'vue2-smooth-scroll'

Vue.use(SmoothScroll)

这些库通常提供更多配置选项和更好的浏览器兼容性。

自定义平滑滚动函数

如果需要完全控制滚动行为，可以创建自定义平滑滚动函数：

methods: {
  smoothScrollTo(target, duration = 500) {
    const targetElement = document.querySelector(target)
    const targetPosition = targetElement.getBoundingClientRect().top
    const startPosition = window.pageYOffset
    const distance = targetPosition
    let startTime = null

    function animation(currentTime) {
      if (startTime === null) startTime = currentTime
      const timeElapsed = currentTime - startTime
      const run = easeInOutQuad(timeElapsed, startPosition, distance, duration)
      window.scrollTo(0, run)
      if (timeElapsed < duration) requestAnimationFrame(animation)
    }

    function easeInOutQuad(t, b, c, d) {
      t /= d/2
      if (t < 1) return c/2*t*t + b
      t--
      return -c/2 * (t*(t-2) - 1) + b
    }

    requestAnimationFrame(animation)
  }
}

这种方法虽然代码量较多，但提供了最大的灵活性和控制力。