Bagaimanakah Saya Boleh Menghalang Pautan Sauh daripada Tersembunyi di Sebalik Pengepala Tetap?

Menyelesaikan Isu Offset Anchor dengan Pengepala Tetap

Semasa menavigasi halaman web dengan pengepala tetap, pengguna sering menghadapi kelainan yang menjengkelkan. Apabila mengklik pada pautan sauh, halaman melompat secara tiba-tiba, meninggalkan kandungan di bawah pengepala tersembunyi. Isu ini amat berleluasa apabila pengepala ditetapkan pada ketinggian tetap. Untuk menyelesaikan masalah ini, kita perlu melaksanakan offset yang melaraskan kedudukan sauh untuk mengimbangi ketinggian pengepala. Berikut ialah penyelesaian terperinci menggunakan HTML, CSS dan JavaScript.

Penyelesaian CSS:

Untuk mengimbangi sauh menggunakan CSS, anda boleh menggunakan gaya ini:

a.anchor {
    display: block;
    position: relative;
    top: [offset value]px;
    visibility: hidden;
}

Di sini, [nilai offset] mewakili jarak offset yang diingini. Sebagai contoh, jika pengepala anda adalah 25px tinggi, anda akan menetapkan nilai offset kepada -250px (negatif untuk mengimbangi ke atas). Ini memastikan bahawa apabila pengguna mengklik pada sauh, halaman akan menatal dengan lancar, membawa sauh ke bahagian atas kawasan yang boleh dilihat tanpa mendedahkan kandungan pengepala.

Penyelesaian HTML:

Dalam dokumen HTML anda, hanya sertakan tag anchor anda dengan yang sesuai kelas:

<a class="anchor">

Penyelesaian JavaScript:

Walaupun kurang cekap daripada penyelesaian CSS atau HTML, anda boleh mencapai offset menggunakan JavaScript dengan menangkap acara klik anchor dan melaraskan kedudukan tatal halaman secara manual:

document.querySelectorAll('.anchor').forEach((anchor) => {
    anchor.addEventListener('click', (event) => {
        event.preventDefault();
        const offset = 25; // Replace with your desired offset
        window.scroll({
            top: anchor.getBoundingClientRect().top - offset,
            behavior: 'smooth'
        });
    });
});

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Pautan Sauh daripada Tersembunyi di Sebalik Pengepala Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!