Bagaimanakah Saya Boleh Melaksanakan Tatal Lancar untuk Pautan Sauh dalam Tapak Web Saya?

Meningkatkan Navigasi Pautan Anchor dengan Tatal Lancar

Tatal lancar boleh meningkatkan pengalaman pengguna dengan ketara apabila menavigasi halaman web anda menggunakan pautan sauh. Dengan menghapuskan lompatan yang menggelegar dan menyediakan peralihan yang lancar, anda meningkatkan kebolehcapaian halaman dan estetika keseluruhan.

Menggunakan JavaScript Asli

Versi terkini penyemak imbas utama kini menyokong penatalan lancar asli untuk pautan utama. Anda boleh melaksanakan fungsi ini menggunakan kod berikut:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', e => {
    e.preventDefault();
    document.querySelector(anchor.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
  });
});

jQuery Solution

Untuk keserasian penyemak imbas yang lebih lama, jQuery menawarkan penyelesaian yang boleh dipercayai:

$(document).on('click', 'a[href^="#"]', event => {
  event.preventDefault();
  $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 500);
});

Mengendalikan Elemen Sasaran Tanpa ID

Jika elemen sasaran tidak mempunyai ID tetapi dipautkan dengan nama, gunakan yang berikut kod:

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

Pengoptimuman Prestasi

Untuk kecekapan, disyorkan untuk cache pemilih $('html, body'):

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

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

Mengemas kini URL

Untuk mengemas kini URL semasa animasi menatal, masukkan kod berikut dalam panggil balik:

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

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

Dengan menggabungkan teknik ini, anda boleh memberikan pengalaman navigasi yang lancar dan menarik untuk pengguna tapak web anda, menjadikannya menyeronokkan untuk menavigasi kandungan halaman.

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