Cómo crear un botón de desplazamiento hacia arriba 4w2v2o

Herramientas SEO Tamaño del resultado: 668 x 574

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Cómo crear un botón de desplazamiento hacia arriba</title>
</head>
<style>
/* Volver arriba */
#back_to_top{float:right;width:52px;height:52px;line-height:42px;right:20px;;font-size:20px;text-align:center;position: fixed;cursor: pointer;opacity: .50;z-index: 100;bottom:10px;visibility: visible;display: none;}

</style>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<body>

<div style="background-color:black;color:white;padding:30px">Desplazarse hacia abajo</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">Este ejemplo muestra cómo crear un botón "desplazarse hacia arriba" que se hace visible cuando el  comienza a desplazarse por la página.</div>

<div id="back_to_top" class="btn btn-info"><a href="#"><i class="glyphicon glyphicon-chevron-up" style="color: #ffffff;"></i></a></div>

<script>
jQuery(document).ready(function(){
    jQuery("#back_to_top").hide();
    jQuery(function () {
        jQuery(window).scroll(function () {
        if (jQuery(window).scrollTop() > 400) {
                jQuery('#back_to_top').fadeIn();
        } else {
                jQuery('#back_to_top').fadeOut();
        }
    });
    // scroll body to 0px on click
    jQuery('#back-top a').click(function () {
        jQuery('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
 });
</script>
</body>
</html>