Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Melaksanakan Tatal Lancar untuk Pautan Sauh Menggunakan jQuery dan JavaScript Asli?

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

Linda Hamilton
Lepaskan: 2024-12-18 15:42:11
asal
483 orang telah melayarinya

How Can I Implement Smooth Scrolling for Anchor Links Using jQuery and Native JavaScript?

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);
});
Salin selepas log masuk

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'
        });
    });
});
Salin selepas log masuk

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;
});
Salin selepas log masuk

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;
});
Salin selepas log masuk

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;
});
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan