Tabla de contenido
1. Introducción
El atributo href de la etiqueta a se usa para especificar la URL del destino del hipervínculo, que puede saltar a la página o ubicación especificada en href.
El ancla puede saltar a la ubicación especificada en la página actual, usando la identificación para usar la URL del ancla.
Haga clic en el enlace al título para saltar a este es el título, y el enlace inferior puede enlazar a este módulo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<a id="top">这是标题，底部链接可以链接到这</a>
</div>
<div>
<a href="#top">链接到标题</a>
</div>
</body>
</html>
Sin embargo, en aplicaciones prácticas, después de hacer clic, salta directamente a la posición especificada en la página, sin animación, y el proceso de salto es muy contundente.
Al hacer clic en el punto de anclaje puede desplazarse suavemente a la posición especificada a través de dos métodos css/js.
2. Método de implementación
2.1 implementación css
Escribir scroll-behavior:smooth en el elemento contenedor de desplazamiento puede hacer que el desplazamiento del contenedor sea fluido.
html, body {
position: relative;
height: 100%;
scroll-behavior: smooth;
}
La propiedad scroll-behavior especifica el comportamiento de desplazamiento de un cuadro de desplazamiento
scroll-behavior： smooth | auto ;
auto (valor predeterminado): indica que el cuadro de desplazamiento se desplaza inmediatamente a la posición especificada.
suave : indica que se utiliza el desplazamiento suave cuando se desplaza la página, en lugar de desplazarse directamente a la posición especificada, como el botón de regreso a la parte superior y el punto de anclaje.
Implementación de 3.1 js
$("a").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, 1000);
return false;
});
El método offset() establece o devuelve las coordenadas de desplazamiento izquierdo o superior de los elementos seleccionados en relación con el documento. (Nota: el método offset() es un método de jquery, que debe introducirse para usar jquery).
$(".div").offset() 获得位移对象
$(".div").offset().top 获得位移高度
$(this).attr("href") es para obtener el valor del atributo href de la etiqueta en la que hizo clic.
El método scrollTop() establece o devuelve la posición de la barra de desplazamiento vertical del elemento seleccionado, por ejemplo, scrollTop: 100px significa deslizar a 100px desde la parte superior.
El método animate() cambia el elemento de un estado a otro a través del estilo CSS, y el valor de la propiedad CSS se cambia gradualmente para que se puedan crear efectos de animación. 1000 se refiere al tiempo de finalización de la animación: 1000 milisegundos.
Si le es útil, recuerde hacer clic en el enlace triple