Scroll de pagina con jQuery

Problema: Utilizar links internos para mover el scroll en una pagina web, utilizando jQuery

Solución rápida:

1. Añadir este script:

 $(".scroll").click(function(event){
        event.preventDefault();
        var full_url = this.href;
        var parts = full_url.split("#");
        var trgt = parts[1];
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;
        $('html, body').animate({scrollTop:target_top}, 500);
});

2. Link:

<a class='scroll' href='#finalPagina'>pulsa aqui para ir al final de esta pagina</a>

3. Etiqueta "destino":

<span id="finalPagina"></span>

Paso a paso:

Esta es una buena solución para dar un buen toque a tu pagina cuando hay mucho contenido y el usuario tiene que utilizar mucho el scroll lateral. Muy usado al final de paginas para "Go To Top" o tambien usado en pagina de "condiciones de uso" para ir directamente a algun apartado en concreto.

El hecho de utilizar jQuery es porque nos permite, al implementarlo, añadir muchas otras funcionalidades y alterar su comportamiento. Ademas, es una plataforma de desarrollo muy extendida y estandarizada por lo que es una buena solucion independientemente del navegador utilizado.

La funcion en jQuery:

La primera parte sera añadir a nuestro archivo de javascript el evento "click" para los tags que tengan como clase "scroll". El nombre de la clase, se puede modificar por el que queramos.

$(".scroll").click(function(event){ ...

Como el "hacer un click" es un evento, debemos quitar el comportamiento standard. En jQuery lo evitamos asi:

event.preventDefault();

Las siguientes variables captan el atributo "href" del tag y parten (split) la cadena por donde haya el signo "#".

var full_url = this.href;
var parts = full_url.split("#");

Con la cadena partida, nos quedamos con la parte interesante [1]

var trgt = parts[1];
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;

Obtenemos a que altura desde el "top" esta nuestra etiqueta de destino mediante la función offset();

var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;

Finalmente, con la función animate jQuery movera la pantalla hasta la posicion de la "etiqueta destino" en 0,5 segundos (500 ms).

$('html, body').animate({scrollTop:target_top}, 500);

PDPF (Post data para flamers): Evidentemente no hace falta declarar tantas variables, ya que muchas se podrian agrupar o concatenar. Podria quedar asi (más optimo en recursos).

$(".scroll").click(function(event){
event.preventDefault();
$('html, body').animate({scrollTop:$("#"+this.href.split("#")[1]).offset().top},500);}

Las "etiquetas":

Por una parte pondremos una etiqueta <a> con los atributos "class" y "href". A esta etiqueta se puede dar el estilo que queramos y poner dentro, texto o imagen igual que un "anchor" normal y corriente:

<a class='scroll' href='#finalPagina'>Go Top!</a>

La etiqueta destino es en este caso un simple <span>, pero podria ser cualquier otro tag, pero para que funcione el "id" debe coincidir con el "href" del link anterior.

<span id="finalPagina"></span>

Espero que haya servido de ayuda, seguro que hay otras mas soluciones, si las quereis compartir dejadlas en los comentarios, gracias !