BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Scroll to top, un plugin jQuery para ´volver arriba´

24/FEB/2010 6.107 visitas Ver comentarios
Scroll to top, un plugin jQuery para ´volver arriba´

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Este plugin es un tanto antiguo, pero nunca está de más utilizarlo en páginas con grandes cantidades de texto o mucho scroll vertical.

Básicamente se encarga de hacer aparecer de la nada un enlace abajo de todo una vez que comenzamos a hacer scroll, que nos devolverá a la posición original de la web.

Su uso es muy simple y totalmente personalizable mediante unas pocas líneas de CSS.

El código:
Consta de 3 partes, el html (código 1), el css (código 2) y el javascript (código 3)

Vía: Brian Cray.

Código 1 - HTML
<body>
<div id="top"></div>
<!-- put all of your normal <body> stuff here -->
<div id="message"><a href="top">Volver arriba</a></div>
</body>
Código 2 - CSS
#message a
{
/* display: block before hiding */
display: block;
display: none;
/* link is above all other elements */
z-index: 999;
/* link doesn't hide text behind it */
opacity: .8;
/* link stays at same place on page */
position: fixed;
/* link goes at the bottom of the page */
top: 100%;
margin-top: -80px; /* = height + preferred bottom margin */
/* link is centered */
left: 50%;
margin-left: -160px; /* = half of width */
/* round the corners (to your preference) */
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
/* make it big and easy to see (size, style to preferences) */
width: 300px;
line-height: 48px;
height: 48px;
padding: 10px;
background-color: #000;
font-size: 24px;
text-align: center;
color: #fff;
}
Código 3 - JAVASCRIPT
$(function () { // run this code on page load (AKA DOM load)
/* set variables locally for increased performance */
var scroll_timer;
var displayed = false;
var $message = $('#message a');
var $window = $(window);
var top = $(document.body).children(0).position().top;
/* react to scroll event on window */
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () { // use a timer for performance
if($window.scrollTop() <= top) // hide if at the top of the page
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false) // show if scrolling down
{
displayed = true;
$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
}
}, 100);
});
});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018