Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Melaksanakan Tatal Lancar untuk Pautan Sauh?

Bagaimanakah Saya Boleh Melaksanakan Tatal Lancar untuk Pautan Sauh?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-16 22:42:18929semak imbas

How Can I Implement Smooth Scrolling for Anchor Links?

Mencapai Tatal Lancar dengan Pautan Sauh

Menggabungkan hiperpautan kepada Soalan Lazim dalam bahagian bantuan ialah pendekatan biasa untuk membimbing pengguna kepada maklumat tertentu. Walaupun pautan sauh membolehkan penatalan halaman ke lokasi sasaran, mencapai pengalaman penatalan yang lancar boleh meningkatkan interaksi pengguna.

Penyelesaian Asli dan berasaskan jQuery

Versi terkini penyemak imbas kini menyokong penyelesaian asli untuk menatal anchor yang lancar.

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

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

Untuk keserasian penyemak imbas yang lebih luas, jQuery menawarkan teknik alternatif:

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

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

Selain itu, jQuery mengendalikan kes di mana elemen sasaran tidak mempunyai ID.

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

    return false;
});

Pengoptimuman Prestasi

Caching pemilih $('html, body') boleh bertambah baik dengan ketara prestasi.

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

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

    return false;
});

Mengemas kini URL

Jika mengemas kini URL semasa menatal diingini, ia boleh dicapai dalam panggilan balik animasi.

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?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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