實現平滑滾動的核心方法是使用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。它們提供了更強大的動畫控制能力，可以讓你精確地調整滾動的速度、緩動函數，甚至添加更復雜的動畫效果。
