怎么在不支持CSS scroll-behavior时实现平滑滚动-css教程-PHP中文网

在不支持 scroll-behavior: smooth 的旧版浏览器中，可以通过 javascript 监听滚动事件并手动计算位置来实现平滑滚动。核心做法是获取目标元素的坐标，利用 requestanimationframe 在每一帧更新 window.scrolly 或 element.scrolltop，直到到达目标位置。这种方法能确保在 ie11 等环境中也能获得一致的视觉体验。

怎么在不支持CSS scroll-behavior时实现平滑滚动

如何为页面锚点链接添加平滑滚动效果

要为页面上的所有内部锚点链接（如）添加平滑滚动，需要拦截点击事件，阻止默认跳转，然后调用平滑滚动函数。具体做法是遍历所有 a 标签，检查其 href 是否以 # 开头且指向当前页面的 ID，如果是，则绑定 click 事件处理器。在处理器中，通过 document.getElementById 获取目标元素，计算其与视口顶部的距离差，启动动画循环。

怎么在不支持CSS scroll-behavior时实现平滑滚动

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

function smoothScroll(targetElement) {
  const startY = window.pageYOffset;
  const targetY = targetElement.getBoundingClientRect().top + startY;
  const distance = targetY - startY;
  let startTime = null;

  function step(currentTime) {
    if (!startTime) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const progress = Math.min(timeElapsed / 500, 1); // 500ms duration
    const ease = progress  {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const targetId = this.getAttribute('href').substring(1);
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      smoothScroll(targetElement);
    }
  });
});

上述代码定义了 smoothScroll 函数，使用 easeInOutQuad 缓动函数使滚动先加速后减速。主程序遍历所有锚点，点击时获取目标 DOM 节点并传入函数。预期结果是页面平滑滚动至指定 ID 元素处，无闪烁。

如何实现自定义滚动容器的平滑滚动

对于非 window 的滚动容器（如

），实现原理相同，但需操作 scrollTop 属性而非 window.scrollY。具体做法是获取滚动容器的引用，计算其内部子元素相对于容器顶部的偏移量，然后在动画循环中更新 container.scrollTop。这适用于侧边栏、聊天窗口等局部滚动区域。
container.scrollTop

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！