Scroll Top con jQuery
Cuando tenemos páginas muy extensas con mucho contenido generándose mucho scroll es muy útil para el usuario proporcionarle un botón de subida al top o cima de la página. Existen muchos plugins para realizar esta acción. En este artículo vamos a ver como disponer de este botón con jQuery sin utilizar plugins.
El código que vamos a ilustrar puede ser incluido en las plantillas de WordPress, Prestashop, Magento, etc sin necesidad de añadir módulos extra o plugins.
Como podemos añadirlos en nuestras webs sin necesidad de plugins?
Lo primero será añadir el link que hará de botón (flecha arriba). Yo lo suelo poner justo por encima de la etiqueta de cierre del <body>.
<a href="#" class="scrolltop"></a>
Dentro de la cabecera de tu página añade la librería jQuery si no la tienes ya y los scripts que harán toda la funcionalidad que se pretende:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(window).scroll(function(){
if ($(this).scrollTop() > 100)
$('.scrolltop').fadeIn();
else
$('.scrolltop').fadeOut();
});
$(document).ready(function(){
$('.scrolltop').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
})
</script>
En el código jQuery que vamos a añadir por un lado tenemos el control del visualizado del botón observando la posición del scroll. Cuando sea mayor a 100px lo hacemos aparecer y cuando no desaparecer y, por otro lado, tenemos el control del botón que tras pulsarlo subimos a la cima con efecto animación.
Después le damos un poco de estilo a nuestro botón:
.scrolltop {
background-image: url("arrow.png");
background-repeat: no-repeat;
bottom: 20px;
display: none;
height: 50px;
left: auto;
overflow: hidden;
padding: 17px 16px;
position: fixed;
right: 20px;
top: auto;
width: 55px;
z-index: 90;
}
En el caso del ejemplo en funcionamiento estamos utilizando una imagen posicionada a 20px a la derecha y abajo en posición fija. Editando la clase CSS anterior podrás cambiar el aspecto del botón.
Autor
¿Buscas trabajo de programador?
4 respuestas a “Scroll Top con jQuery”
Deja una respuesta
54 artículos que te podrían interesar
gracias
a mi tampoco me aparece la imagen ayuda!,y eso que la ruta esta correcta,me la indica automaticamente del dreamweaver
No se ve la imagen que le pongo en el CSS
Revisa que la ruta sea la correcta