平滑滾動可以顯著改善使用錨連結瀏覽網頁時的使用者體驗。透過消除不和諧的跳躍並提供無縫過渡，您可以增強頁面的可訪問性和整體美觀。
主要瀏覽器的最新版本現在支援錨連結的本機平滑滾動。您可以使用以下程式碼實現此功能：
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', e => {
e.preventDefault();
document.querySelector(anchor.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
});
});對於較舊的瀏覽器相容性，jQuery 提供了可靠的解決方案：
$(document).on('click', 'a[href^="#"]', event => {
event.preventDefault();
$('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 500);
});如果目標元素缺少ID但透過名稱鏈接，請使用以下內容程式碼：
$('a[href^="#"]').click(function () {
$('html, body').animate({ scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top }, 500);
return false;
});為了效率，建議快取$('html, body')選擇器：
var $root = $('html, body');
$('a[href^="#"]').click(function () {
$root.animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500);
return false;
});要在捲動動畫期間更新URL，請在回調：
var $root = $('html, body');
$('a[href^="#"]').click(function() {
var href = $.attr(this, 'href');
$root.animate({ scrollTop: $(href).offset().top }, 500, () => { window.location.hash = href; });
return false;
});透過結合這些技術，您可以為網站使用者提供無縫且引人入勝的導航體驗，使瀏覽頁面內容成為一種樂趣。
以上是如何在我的網站中實現錨連結的平滑滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
