Desplazamiento suave al hacer clic en un enlace de anclaje
Tengo un par de hipervínculos en mi página. Preguntas frecuentes que los usuarios leerán cuando visiten mi sección de ayuda.
Usando enlaces de anclaje, puedo hacer que la página se desplace hacia el ancla y guiar a los usuarios allí.
¿Hay alguna manera de hacer que el desplazamiento sea fluido?
Pero observe que está usando una biblioteca JavaScript personalizada. ¿Quizás jQuery ofrece algo como esto integrado?
Actualización de abril de 2018: ahora hay una forma nativa de hacer esto :
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
Actualmente, esto solo es compatible con los navegadores más avanzados.
Para compatibilidad con navegadores antiguos, puede utilizar esta técnica jQuery:
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
Y aquí está el violín: http://jsfiddle.net/9SDLw/
Si su elemento de destino no tiene un ID y lo está vinculando mediante su name, use esto:
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);
return false;
});
Para aumentar el rendimiento, debes almacenar en caché ese $('html, body')selector, para que no se ejecute cada vez que se hace clic en un ancla:
var $root = $('html, body');
$('a[href^="#"]').click(function () {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
Si desea que se actualice la URL, hágalo dentro de la animatedevolución de llamada:
var $root = $('html, body');
$('a[href^="#"]').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
El nuevo atractivo en CSS3. Esto es mucho más fácil que todos los métodos enumerados en esta página y no requiere Javascript. Simplemente ingrese el siguiente código en su CSS y, de repente, los enlaces que apuntan a ubicaciones dentro de su propia página tendrán una animación de desplazamiento suave.
html{scroll-behavior:smooth}
Después de eso, cualquier enlace que apunte hacia un div se deslizará suavemente hacia esas secciones.
<a href="#section">Section1</a>
Editar: Para aquellos confundidos acerca de la etiqueta anterior. Básicamente es un enlace en el que se puede hacer clic. Luego puedes tener otra etiqueta div en algún lugar de tu página web como
<div id="section">content</div>
En este sentido, se podrá hacer clic en un enlace e irá a cualquier #sección, en este caso es nuestro div al que llamamos sección.
Por cierto, pasé horas intentando que esto funcionara. Encontré la solución en alguna sección de comentarios oscuros. Tenía errores y no funcionaba en algunas etiquetas. No funcionó en el cuerpo. Finalmente funcionó cuando lo puse en html{} en el archivo CSS.
La sintaxis correcta es:
//Smooth scrolling with links
$('a[href^=\\#]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
$('html,body').animate({scrollTop:$(location.hash).offset().top}, 500);
});
Simplificando : SECO
function smoothScrollingTo(target){
$('html,body').animate({scrollTop:$(target).offset().top}, 500);
}
$('a[href^=\\#]').on('click', function(event){
event.preventDefault();
smoothScrollingTo(this.hash);
});
$(document).ready(function(){
smoothScrollingTo(location.hash);
});
Explicación de href^=\\#:
^significa que coincide con lo que contiene#char. Por lo tanto, solo haga coincidir los anclajes para asegurarse de que sea un enlace para la misma página (Gracias Peter Wong por su sugerencia).\\Esto se debe a que#es un carácter especial en el selector CSS, por lo que tenemos que escapar de él.
