实现平滑滚动的核心方法是使用css属性scroll-behavior: smooth;，将其应用于<html>或<body>标签可使整个页面滚动平滑，也可单独作用于某个<div>容器。1. scroll-behavior对锚点链接、scrollintoview()或window.scrollto()触发的滚动生效，不影响手动拖动或滚轮滚动；2. 为兼容老旧浏览器，可用javascript检测是否支持scroll-behavior，若不支持则引入smoothscroll-polyfill库进行polyfill处理；3. 自定义滚动速度和缓动函数需依赖javascript，如使用window.scrollto()配合behavior: 'smooth'实现基础效果，或借助gsap、anime.js等动画库实现更精细控制。最终，该方案可在现代浏览器中直接生效，在旧浏览器中通过polyfill实现兼容性支持。
实现平滑滚动，其实就一句话的事：scroll-behavior: smooth; 关键在于你把它放在哪里。
解决方案
直接给<html>或者<body>标签设置scroll-behavior: smooth; 就能让整个页面的滚动都变得平滑。当然，你也可以针对某个特定的滚动容器设置，比如一个<div>。
立即学习“前端免费学习笔记（深入）”；
<html style="max-width:90%">
<head>
<title>平滑滚动示例</title>
</head>
<body>
<h1>平滑滚动示例</h1>
<a href="#section1">跳转到 Section 1</a><br>
<a href="#section2">跳转到 Section 2</a><br>
<section id="section1" style="height: 500px; background-color: #f0f0f0;">
<h2>Section 1</h2>
<p>这里是 Section 1 的内容。</p>
</section>
<section id="section2" style="height: 500px; background-color: #e0e0e0;">
<h2>Section 2</h2>
<p>这里是 Section 2 的内容。</p>
</section>
</body>
</html>但要注意，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。
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。它们提供了更强大的动画控制能力，可以让你精确地调整滚动的速度、缓动函数，甚至添加更复杂的动画效果。
