El punto de anclaje es un tipo de hipervínculo en la producción de páginas web, también llamado ancla con nombre. Un ancla con nombre es un hipervínculo dentro de una página, como un localizador rápido, y se usa ampliamente.
Los anclajes con nombre le permiten establecer marcas en un documento, generalmente en la parte superior o en la parte superior de un tema específico del documento. Luego se pueden crear enlaces a estos anclajes con nombre que lleven rápidamente a los visitantes a la ubicación designada.
Crear un enlace a un ancla con nombre es un proceso de dos pasos. Primero, cree un ancla con nombre y luego cree un enlace al ancla con nombre.
1. Punto de anclaje ordinario
<a href="#aboutmao" >锚点链接</a>
...
<div id="aboutmao">锚点跳转到这里</div>
Estas son funciones de anclaje perfectas, pero si el encabezado de mi página web siempre está fijo en la parte superior, el enlace de anclaje debe estar a un encabezado de la parte superior; de lo contrario, el encabezado bloqueará el contenido del enlace vinculado.
Por ejemplo:
El efecto que queremos:
Lo más conveniente es resolver este problema con 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>
Haga clic en el evento del punto de anclaje, luego obtenga la distancia de esta identificación desde la parte superior de la página web, reste la altura del encabezado y finalmente use window.scrollTo para deslizarse directamente a la posición del punto de anclaje. Se ha probado correctamente en IE10+, Firefox y Google Chrome.