Bagaimanakah Saya Boleh Mencapai Tatal Lancar dengan Pautan Sauh?

Tatal Lancar apabila Mengklik Pautan Sauh

Apabila menavigasi halaman web dengan pautan sauh, pengguna menjangkakan peralihan yang lancar ke bahagian sasaran. Walau bagaimanapun, tingkah laku menatal lalai boleh menjadi mendadak. Artikel ini meneroka teknik untuk mencapai penatalan lancar apabila mengklik pautan sauh.

Sokongan Asli

Penyemak imbas seperti Chrome dan Firefox telah memperkenalkan sokongan asli untuk penatalan lancar. Ini dilaksanakan menggunakan sifat "kelakuan" dengan nilai "lancar" apabila menatal ke paparan:

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

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

Pemalam jQuery

Untuk pelayar lama, pemalam jQuery boleh melicinkan animasi skrol. Teknik ini menggunakan kaedah "animate" untuk mengalihkan halaman ke bahagian sasaran:

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

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

Teknik Dipertingkat

Jika elemen sasaran tidak mempunyai ID, perkara berikut pemalam jQuery yang diubah suai boleh digunakan:

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

    return false;
});

Prestasi Pengoptimuman

Caching pemilih "$('html, body')" dalam pembolehubah meningkatkan prestasi:

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

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

    return false;
});

Memelihara Cincang URL

Untuk mengemas kini cincangan URL apabila menatal lancar, gunakan "animate" panggil balik:

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

Dengan melaksanakan salah satu daripada teknik ini, anda boleh memberikan pengalaman menatal yang digilap dan mesra pengguna apabila menavigasi halaman anda menggunakan pautan sauh.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Tatal Lancar dengan Pautan Sauh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!