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.

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(6 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

4 respuestas a “Scroll Top con jQuery”

  1. Miguel dice:

    gracias

  2. alvaro dice:

    a mi tampoco me aparece la imagen ayuda!,y eso que la ruta esta correcta,me la indica automaticamente del dreamweaver

  3. Deyluis Jesus Tejada Arias dice:

    No se ve la imagen que le pongo en el CSS

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre