Bagaimanakah Saya Boleh Melaksanakan Tatal Lancar untuk Pautan Sauh Menggunakan JavaScript dan jQuery?

Mencipta Tatal Lancar untuk Pautan Sauh

Tatal lancar meningkatkan pengalaman pengguna apabila menggunakan pautan sauh untuk menavigasi dalam halaman. Artikel ini menyediakan dua pendekatan untuk mencapai kesan ini: kaedah asli yang serasi dengan penyemak imbas moden dan pelaksanaan jQuery untuk sokongan yang lebih luas.

Kaedah Asli untuk Penyemak Imbas Moden:

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

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

Kaedah jQuery untuk Orang Tua Pelayar:

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

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

Nota: Untuk elemen tanpa ID, variasi ini harus digunakan:

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

    return false;
});

Pengoptimuman Prestasi:

Untuk meningkatkan prestasi, cache $('html, body') pemilih:

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

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

Mengemas kini URL:

Untuk kes di mana anda mahu URL menggambarkan bahagian semasa, gunakan variasi ini:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Tatal Lancar untuk Pautan Sauh Menggunakan JavaScript dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!