Cómo implementar el botón de “Volver a arriba” mediante CSS y jQuery

Cuando una página web cuenta con muchísimo contenido, necesita de una opción para que los visitantes puedan ir a otras secciones de forma sencilla. Mediante jQuery, podemos tener una mejor interfaz de usuario añadiéndole un elemento que nos permita hacer scroll hacia la parte más superior de la página.

En este tutorial, te mostraremos cómo crear un botón de “Volver a arriba” y sus usos. Haciendo clic en este botón, podrás desplazarte directamente y mediante una suave animación, hacia la parte más superior de la página. Este botón no estará presente permanentemente en la web, si no que aparecerá cuando el usuario se desplace lo suficiente hacia abajo en la web. Es por eso, en esta época en que las webs son súper largas y cuentan con mucho contenido, que agregar un botón de “Volver a arriba” puede convertirse en una muy buena idea.

Utilizaremos jQuery y CSS para implementar este botón. En este tutorial, os describiré al detalle todo el proceso junto con código.

Javascript

Lo primero que debes hacer es incluir la librería jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Tendremos que escribir algo de Javascript para trackear el scroll de la página y hacer que aparezca el botón si el usuario ha llegado lo suficientemente abajo. Utilizaremos la función scroll() para saber si se ha hecho scroll o no. Como puedes ver en el código de más abajo, si se ha desplazado más de 100px hacia abajo, el botón aparecerá, de lo contrario, lo ocultaremos.

$(window).scroll(function(){ 
    if ($(this).scrollTop() > 100) { 
        $('#scroll').fadeIn(); 
    } else { 
        $('#scroll').fadeOut(); 
    } 
});

Ahora vamos con la parte del clic al botón. Una vez se haya hecho clic en el botón, debemos hacer scroll hacia la parte más superior de la web. Para ello utilizaremos la función animate() y el evento scrollTop.

$('#scroll').click(function(){ 
    $("html, body").animate({ scrollTop: 0 }, 600); 
    return false; 
});

Aquí tienes el código Javascript completo.

<script type='text/javascript'>
$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});
</script>

CSS

Ahora vamos con lo sencillito. Vamos a personalizar nuestro botón con algo de CSS.

#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

HTML

El código de nuestro botón debería ser algo similar a:

<a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Top<span></span></a>

Script de botón de “Volver a arriba” completo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Back To Top Button by CodexWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});
</script>
<style type="text/css">
/* BackToTop button css */
#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}
</style>
</head>

<body>
<!-- BackToTop Button -->
<a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Top<span></span></a>

<!-- ++++++++++++ Page Content Goes Here ++++++++++++ -->

</body>
</html>

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.