如何使用 JavaScript 和 jQuery 實現錨連結的平滑滾動？

為錨連結建立平滑捲動

平滑滾動可增強使用錨連結在頁面內導航時的使用者體驗。本文提供了兩種實現此效果的方法：與現代瀏覽器相容的本機方法和提供更廣泛支援的 jQuery 實作。

現代瀏覽器的本機方法：

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', (e) => {
        e.preventDefault();

        document.querySelector(this.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);
});

注意：

對於沒有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;
});

以上是如何使用 JavaScript 和 jQuery 實現錨連結的平滑滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！