Autor:

scrollTop, enlace que posiciona a la parte superior de la página web.

0
6598

Muchas veces tenemos la situación de que en algún artículo de nuestra web o diferentes contenidos son muy extensos y necesitamos de hacer un constante scroll para poder seguir la lectura, hasta aquí todo más o menos bien.

El problema es cuando avanzamos mucho el scroll y llegamos al final de página y necesitamos volver hasta arriba para consultar un contenido de inicio, es muy engorroso tener que volver a usar la barra o scroll para volver hacia arriba.

Con esto queremos ayudarte a solucionar el problema y darte comodidad para que puedas subir hasta la parte superior de tu web automáticamente solo pulsando un enlace.

Javascript

$(document).ready(function() {
	$('#volver-arriba').click(function(){  //referimos el elemento ( clase o identificador de acción )
		$('html, body').animate({scrollTop:0}, 'slow'); //seleccionamos etiquetas,clase o identificador destino, creamos animación hacia top de la página.
		return false;
	});
});

#volver-arriba referimos el elemento ( clase o identificador de acción ).

$('#volver-arriba').click(function(){

$(‘html, body’) seleccionamos etiqueta, clase o identificador destino, creamos animación hacia el top de la página.

$('html, body').animate({scrollTop:0}, 'slow');

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

scrollTop, enlace que posiciona a la parte superior de la página.

<!-- inserta aquí tu contenido completo, ten en cuenta que necesitas contenido suficiente 
como para sobrepasar el tamaño de alto de tu pantalla para poder ver el efecto.--> <a id="volver-arriba" href="#">Volver arriba </a>

Necesitas Jquery

Inserta Jquery en la etiqueta head.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

Para poder ver la animación de desplazamiento, necesitamos usar en este ejemplo jquery. Ya que usamos la función animate({scrollTop:0}, ‘slow’) de nuestro código Javascript. Es la que nos dará la posibilidad de crear un efecto progresivo de transición hasta llegar a la parte superior de la página, también podéis configurar la velocidad del desplazamiento entre otras funciones.

Asigna id al enlace

Damos un nombre de id al enlace, volver-arriba, para identificar que elemento va a ser el que ejecute nuestra función de Javascript cuando hagamos click en el enlace y a continuación nos suba al top de la página web.

 <a id="volver-arriba" href="#"> Volver arriba </a>

Mira este ejemplo funcionando