TopScroll con CSS y jQuery

Los blogs supusieron un cambio radical en el diseño web. Las páginas pasaban a ser mucho más largas de lo que hasta ahora habían sido.

La navegación vertical se hace interminable en numerosos blogs, en la mayoría de las ocasiones no perjudica al usuario, ya que navegamos viendo pasar los encabezados de los post por curiosidad o en nuestra trayectoria para llegar hasta un contenido que sea de nuestro agrado.

Siempre es preferible usar la rueda del ratón para hacer scroll a través de los post o productos de una tienda, que tener que ir paginando y cargando nuevas páginas. Incluso ahora, tenemos la posibilidad de ir cargando contenidos de manera controlada para hacer la página menos pesada en origen, dando así mayor rapidez de navegación al usuario.

Si queréis más información sobre la importancia del scroll vertical, leed este post «Al usuario SI le gusta hacer scroll«.

Pero lo que puede suceder es que llegue un momento en el que nos interese ir a la cabecera, bien sea para acceder al menú o a algún contenido que ha quedado por ahí arriba.

Para facilitar la navegación, sobre todo en una web con páginas con mucho scroll vertical, lo ideal es colocar un «Scroll to top«, un botón que nos va acompañando en la navegación vertical y que automáticamente nos redirige al comienzo de la página al pulsar sobre él.
En este blog tenéis un ejemplo de cómo funciona.
En si, se trata de una capa flotante que está situada siempre en el bottom de la página y que contiene un botón que nos mueve la página a modo de ancla pero aprovechando los efectos de movimiento que ofrece jQuery.

El ejemplo que os dejo está sacado de MattVarone.com, ahí podéis coger los js, la css e incluso la imagen con rollover del botón.
Este ejemplo tiene la particularidad de que el botón no aparece mientras no exista scroll vertical, lo cual a mi gusto le hace todavía mucho más interesante.

• VER EJEMPLO Y DESCARGAR – Cuando carguéis el la página de este enlace, haced scroll para que aparezca en el margen inferior derecho el botón «Top Scroll».