Comment puis-je empêcher les liens d'ancrage d'être cachés derrière un en-tête fixe ?

Résoudre les problèmes de décalage d'ancrage avec un en-tête fixe

Lors de la navigation dans des pages Web avec des en-têtes fixes, les utilisateurs rencontrent souvent une bizarrerie ennuyeuse. Lorsque vous cliquez sur un lien d’ancrage, la page saute brusquement, laissant caché le contenu situé sous l’en-tête. Ce problème est particulièrement répandu lorsque le linteau est réglé à une hauteur fixe. Pour résoudre ce problème, nous devons implémenter un décalage qui ajuste la position de l'ancre pour compenser la hauteur de la plateforme. Voici une solution détaillée utilisant HTML, CSS et JavaScript.

Solution CSS :

Pour décaler une ancre à l'aide de CSS, vous pouvez appliquer ces styles :

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

Ici, [valeur de décalage] représente la distance de décalage souhaitée. Par exemple, si votre en-tête mesure 25 px de haut, vous définirez la valeur de décalage sur -250 px (négatif pour décaler vers le haut). Cela garantit que lorsque l'utilisateur clique sur l'ancre, la page défilera en douceur, amenant l'ancre en haut de la zone visible sans révéler le contenu de l'en-tête.

Solution HTML :

Dans votre document HTML, joignez simplement votre balise d'ancrage avec une classe appropriée :

<a class="anchor">

JavaScript Solution :

Bien que moins efficace que la solution CSS ou HTML, vous pouvez obtenir le décalage à l'aide de JavaScript en capturant l'événement de clic d'ancrage et en ajustant manuellement la position de défilement de la page :

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'
        });
    });
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!