Le point d'ancrage est un type de lien hypertexte dans la production de pages Web, également appelé ancre. Une ancre nommée est un lien hypertexte dans une page, comme un localisateur rapide, et est largement utilisée.
Les ancres nommées vous permettent de définir le balisage dans un document, généralement au niveau ou en haut d'un sujet spécifique dans le document. Des liens vers ces ancres nommées peuvent ensuite être créés pour diriger rapidement les visiteurs vers l'emplacement spécifié.
La création d'un lien vers une ancre nommée est un processus en deux étapes. Commencez par créer une ancre nommée, puis créez un lien vers l’ancre nommée.
1. Point d'ancrage ordinaire
<a href="#aboutmao" >锚点链接</a>
...
<div id="aboutmao">锚点跳转到这里</div>
Ce sont des fonctions d'ancrage parfaites, mais si l'en-tête de ma page Web est toujours fixé en haut, c'est la distance dont le lien d'ancrage doit être en haut d'un en-tête, sinon le contenu du lien lié sera bloqué par l'en-tête.
Par exemple :
L'effet souhaité :
Il est plus pratique de résoudre ce problème avec js :
<a href="javascript:;" class="aboutmao">关于我们</a>
<div id="about">锚点跳转到这里</div>
<script>
$(document).ready(function () {
function topMao(target) {
$('html, body').animate({
scrollTop: $(target).offset().top - $('.topnav').height() //顶部固定导航
}, 500); //130为锚点到距顶部的距离，500为执行时间
return false;
}
$('.aboutmao').click(function () {
topMao('#about');
})
})
</script>
Cliquez sur l'événement du point d'ancrage, puis obtenez la distance de cet identifiant par rapport au haut de la page Web, soustrayez la hauteur de l'en-tête et enfin utilisez window.scrollTo pour glisser directement vers la position du point d'ancrage. Il a été testé correctement sur IE10+, Firefox et Google Chrome.