En el nuevo diseño de www.axtro.es necesitabamos un efecto de scroll suave de una sección a la siguiente. Mi primera idea era simplemente usar uno de los varios Plugins de jQuery, pero todos los que probé tenían problemas y como descubrí después, realmente no hace falta un plugin porque es muy fácil programarlo en pocas líneas:
$(function(){
$('a.scroll_demo[href^="#"]').click(function(e){
var hash = $(this).attr('href'),
posicionNueva = $(hash).offset().top;
$("body,html,document").animate(
{scrollTop:posicionNueva},
'slow',
function(){
window.location.hash = hash;
}
);
e.preventDefault();
});
});
El código de arriba se usa en esta misma entrada en el ejemplo de abajo. Repasemos el código línea por línea:
Lo que queremos es que todos los enlaces que no apunten a otra página sino simplemente a un ancla de la página actual tengan el nuevo comportamiento. Con el selector en $('a.scroll_demo[href^="#"]') lo conseguimos, buscando sólo los enlaces cuyo atributo href empieza con un #. En este ejemplo también he incluido la restricción de que el enlace tiene que tener la clase scroll_demo para no interferir con el resto del blog.
En cuanto el usuario pincha en uno de estos enlaces, sacamos primero el valor del href con hash = $(this).attr('href') y después obtenemos la distancia entre el principio del documento y el principio del ancla con posicionNueva = $(hash).offset().top.
Con esto ya tenemos todo para empezar el scroll: $("body,html,document").animate({scrollTop:posicionNueva}, 'slow') moverá el documento para que el elemento apuntado por el enlace esté visible. Es necesario incluir body,html,document en el selector, para que funcione en todos los navegadores.
En el ejemplo de arriba he incluido como tercer argumento la función function(){window.location.hash = hash;}. Esta función se ejecutará después de finalizar la animación del scroll. Simplemente actualiza la dirección mostrada en el navegador para simular el comportamiento por defecto de pinchar en uno de estos enlaces.
Podéis probarlo en esta misma página con los dos enlaces de abajo:
Título 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Título 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
