Ver ❯
Herramientas SEO
Tamaño del resultado:
668 x 574
×
Cambiar Orientacion
Cambiar tema, Oscuro/Luz
<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>Cómo crear un botón de desplazamiento hacia arriba</title> </head> <style> #toTop{ position: fixed; bottom: 10px; right: 10px; cursor: pointer; 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> <!------ Incluya lo anterior en su etiqueta HEAD ----------> <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> <script> $(document).ready(function(){ $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span> Ir arriba</div>'); $(window).scroll(function () { if ($(this).scrollTop() != 0) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); $('#toTop').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script> </body> </html>