Bagaimanakah Saya Boleh Melaksanakan Tatal Lancar untuk Pautan Sauh?

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!