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

Tatal Lancar dengan Pautan Sauh

Apabila menggunakan pautan sauh untuk mengarahkan pengguna ke bahagian tertentu halaman web, pengalaman menatal yang lancar boleh meningkatkan kebolehcapaian dan penglibatan pengguna. jQuery menawarkan ciri terbina dalam untuk mencapai kesan ini.

Teknik jQuery

Untuk memulakan tatal lancar menggunakan jQuery, gunakan kod berikut:

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

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

Pendekatan Asli (Moden Pelayar)

Pelayar moden kini menyokong tatal lancar asli untuk pautan sauh. Laksanakan tingkah laku ini dengan kod berikut:

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

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

Pertimbangan Tambahan

Tiada Atribut ID: Jika elemen sasaran tidak mempunyai atribut ID tetapi dikenal pasti dengan nama, gunakan kod ini:

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

    return false;
});

Pengoptimuman Prestasi: Cache dokumen pemilih akar untuk meningkatkan prestasi:

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

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

    return false;
});

Kemas Kini URL: Untuk mengemas kini URL semasa menatal, gunakan panggilan balik 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 jQuery dan JavaScript Asli?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!