Scroll animado (subir arriba) con jQuery

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

La siguiente es la forma más sencilla de crear un scroll animado mediante jQuery para desplazarse hasta un punto concreto en nuestra página. Por ejemplo, el típico enlace al final de nuestro site para desplazarse hasta arriba de nuestra web. Para conseguir ese efecto sólo hay que añadir la clase “toplink”.

$(document).ready(function() {

$(“a.topLink”).click(function() {
$(“html, body”).animate({
scrollTop: $($(this).attr(“href”)).offset().top + “px”
}, {
duration: 500,
easing: “swing”
});
return false;
});

});

Agregar también el enlace al final de la web.

<p><a href=”#anchor”>Subir arriba</a></p>

Se puede ver un ejemplo de su funcionamiento en jsbin y el código necesario en jQuery Smooth Scroll to #Anchor

2 comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.