实现平滑滚动的核心方法是使用css属性scroll-behavior: smooth;，将其应用于或
标签可使整个页面滚动平滑，也可单独作用于某个
实现平滑滚动，其实就一句话的事：scroll-behavior: smooth; 关键在于你把它放在哪里。
解决方案
直接给或者
标签设置scroll-behavior: smooth; 就能让整个页面的滚动都变得平滑。当然，你也可以针对某个特定的滚动容器设置，比如一个
立即学习“前端免费学习笔记（深入）”；
<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。它们提供了更强大的动画控制能力，可以让你精确地调整滚动的速度、缓动函数，甚至添加更复杂的动画效果。
