vue 实现平滑滚动

vue 实现平滑滚动的方法

使用原生 scrollIntoView

通过调用元素的 scrollIntoView 方法并设置 behavior: 'smooth' 实现平滑滚动。适用于简单场景。

document.getElementById('target').scrollIntoView({
  behavior: 'smooth'
});

自定义滚动函数

通过 window.scrollTo 结合 requestAnimationFrame 实现自定义滚动动画，适合需要精细控制的情况。

function smoothScrollTo(targetPosition, duration = 1000) {
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  let startTime = null;

  function animation(currentTime) {
    if (!startTime) 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);
}

使用 vue-scrollto 插件

安装官方推荐的 vue-scrollto 插件，提供声明式指令和编程式调用。

npm install vue-scrollto

注册插件后，可通过指令或方法调用：

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

// 指令方式
<a v-scroll-to="'#target'">Scroll</a>

// 方法调用
this.$scrollTo('#target', {
  duration: 800,
  easing: 'ease-in'
});

结合 CSS scroll-behavior

在支持 CSS 的现代浏览器中，可通过全局样式启用平滑滚动（需注意浏览器兼容性）。

html {
  scroll-behavior: smooth;
}

注意事项

• 移动端需测试性能表现，复杂动画可能导致卡顿
• 自定义滚动函数需考虑边界条件（如滚动距离为0）
• 插件方案需注意版本兼容性，建议查看最新文档