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

使用錨鏈接實現平滑滾動

使用錨鏈接將用戶引導至網頁的特定部分時，流暢的滾動體驗可以增強用戶的可訪問性和參與度。 jQuery 提供了內建功能來實現此效果。

jQuery 技術

要使用jQuery 啟動平滑滾動，請使用以下代碼：

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

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

本機方法（現代）瀏覽器）

現代瀏覽器現在支援錨連結的本機平滑滾動。使用以下程式碼實現此行為：

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

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

其他注意事項

無 ID 屬性： 如果目標元素缺少 ID屬性但由名稱標識，請使用此程式碼：

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);

    return false;
});

效能最佳化：快取文件根選擇器以提高效能：

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;
});

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