如何實現錨鏈接平滑滾動？

透過錨定連結平滑捲動

在幫助部分合併常見問題的超連結是引導使用者取得特定資訊的常見方法。雖然錨連結可以使頁面滾動到目標位置，但實現流暢的滾動體驗可以增強用戶互動。

本機和基於 jQuery 的解決方案

最新版本的瀏覽器現在支援平滑錨點滾動的本機解決方案。

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^="#"]', function (event) {
  event.preventDefault();

  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 500);
});

此外，jQuery 會處理目標元素沒有 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

如果需要在捲動時更新URL，可以在動畫回調中實現。

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});

以上是如何實現錨鏈接平滑滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！