当前位置：首页 > VUE

vue 实现平滑滚动

2026-02-18 21:15:28VUE

实现平滑滚动的方法

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

使用CSS的scroll-behavior属性

在CSS中设置scroll-behavior: smooth可以轻松实现平滑滚动效果。这种方法简单且无需额外JavaScript代码。

html {
  scroll-behavior: smooth;
}

这种方法适用于整个页面的滚动效果，包括锚点跳转和JavaScript触发的滚动。

使用JavaScript的scrollTo方法

通过JavaScript的window.scrollTo方法可以实现更精细控制的平滑滚动。Vue组件中可以这样实现：

methods: {
  smoothScrollTo(target) {
    window.scrollTo({
      top: target.offsetTop,
      behavior: 'smooth'
    });
  }
}

在模板中调用该方法：

<button @click="smoothScrollTo(document.getElementById('section1'))">Scroll to Section 1</button>

使用Vue自定义指令

创建一个Vue自定义指令可以更方便地在多个地方重用平滑滚动功能：

Vue.directive('smooth-scroll', {
  inserted: function(el, binding) {
    el.addEventListener('click', () => {
      document.querySelector(binding.value).scrollIntoView({
        behavior: 'smooth'
      });
    });
  }
});

使用指令：

<button v-smooth-scroll="'#section1'">Scroll to Section 1</button>

使用第三方库

对于更复杂的需求，可以考虑使用专门处理滚动的Vue插件，如vue-scrollto：

安装：

npm install vue-scrollto

使用：

import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)

在组件中调用：

<button v-scroll-to="'#section1'">Scroll to Section 1</button>

或通过方法调用：

this.$scrollTo('#section1', 500, { easing: 'ease-in-out' })

自定义缓动函数

对于需要特殊滚动效果的情况，可以自定义缓动函数：

vue 实现平滑滚动

function smoothScrollTo(target, duration) {
  const start = window.pageYOffset
  const distance = target.offsetTop - start
  let startTime = null

  function animation(currentTime) {
    if (!startTime) startTime = currentTime
    const timeElapsed = currentTime - startTime
    const run = ease(timeElapsed, start, distance, duration)
    window.scrollTo(0, run)
    if (timeElapsed < duration) requestAnimationFrame(animation)
  }

  function ease(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)
}

在Vue组件方法中调用这个函数即可实现自定义缓动效果的平滑滚动。