Paano Gumawa: Mahinahon na Paggalaw
Matututunan kung paano gumawa ng mahinahon na epekto ng paggalaw ng scrolling gamit ang CSS.
平滑滾動
Section 2
點擊我，平滑滾動至上方第 1 部分。平滑滾動
為 <html> 元素添加 scroll-behavior: smooth 可以啟用全頁面的平滑滾動：
注意：也可以將其添加到特定元素/滾動容器中。
實例
html {
scroll-behavior: smooth;
}
瀏覽器支持
表中的數字注明了完全支持滾動行為屬性的首個瀏覽器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 61.0 | 79.0 | 36.0 | 14.0 | 48.0 |
跨瀏覽器解決方案
對於不支援 scroll-behavior 屬性的瀏覽器，您可以使用 JavaScript 或 JavaScript 库（如 jQuery）來創建適用於所有瀏覽器的解決方案：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
// 為所有鏈接添加平滑滾動
$("a").on('click', function(event) {
// 在覆蓋默認行為之前，確保 this.hash 具有值
if (this.hash !== "") {
// 防止默認的锚點點擊行為
event.preventDefault();
// 存储哈希值
var hash = this.hash;
// 使用 jQuery 的 animate() 方法添加平滑的頁面滾動
// 可選數字（800）指定滾動到指定區域所需的毫秒數
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// 完成滾動後，將井號 (#) 添加到 URL（默認點擊行為）
window.location.hash = hash;
);
} // End if
);
);
</script>
