立即学习“前端免费学习笔记（深入）”；

  
    
  
  
    
平滑滚动示例
    跳转到 Section 1

    跳转到 Section 2


    

      
Section 1
      
这里是 Section 1 的内容。
    

    

      
Section 2
      
这里是 Section 2 的内容。
    
  

但要注意，scroll-behavior 在一些老旧浏览器上可能不兼容。

如何兼容不支持 scroll-behavior 的浏览器？

用 JavaScript 来做 Polyfill。简单来说，就是检测浏览器是否支持 scroll-behavior，如果不支持，就用 JavaScript 来模拟平滑滚动。

if ('scrollBehavior' in document.documentElement.style === false) {
  // 不支持 scroll-behavior
  const smoothScroll = require('smoothscroll-polyfill')
  smoothScroll.polyfill()
}

// 现在就可以使用 smooth scroll 了
document.querySelector('a[href^="#"]').addEventListener('click', function (event) {
  event.preventDefault()
  document.querySelector(this.getAttribute('href')).scrollIntoView({
    behavior: 'smooth'
  })
})

或者，你也可以直接使用成熟的 JavaScript 库，比如 "smoothscroll-polyfill"，它能自动检测并提供 Polyfill。

Sitekick

一个AI登陆页面自动构建器

下载

scroll-behavior: smooth 会影响所有滚动吗？

不一定。它只影响通过锚点链接、scrollIntoView() 方法或者 window.scrollTo() 等方式触发的滚动。手动拖动滚动条或者使用鼠标滚轮滚动，通常不受 scroll-behavior 的影响。

如果你想更精细地控制滚动行为，比如只对特定元素或者特定类型的滚动应用平滑效果，那就需要结合 JavaScript 来实现。

怎样自定义平滑滚动的速度和缓动函数？

scroll-behavior: smooth; 提供的平滑滚动效果是浏览器默认的，你没法直接用 CSS 来修改它的速度和缓动函数。要自定义，还得靠 JavaScript。

一个简单的例子：

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();

    const targetId = this.getAttribute('href').substring(1);
    const targetElement = document.getElementById(targetId);

    if (targetElement) {
      window.scrollTo({
        top: targetElement.offsetTop,
        behavior: 'smooth',
        block: 'start' // 可选，定义垂直方向的对齐方式
      });
    }
  });
});

这个例子里，我们用 window.scrollTo() 方法来控制滚动，behavior: 'smooth' 启用了平滑滚动。但这个方法还是用了浏览器默认的缓动函数和速度。

要完全自定义，你可能需要用到一些动画库，比如 GreenSock (GSAP) 或者 Anime.js。它们提供了更强大的动画控制能力，可以让你精确地调整滚动的速度、缓动函数，甚至添加更复杂的动画效果。