
Los siguientes ejemplos muestra cómo crear un botón "desplazarse hacia arriba" que se hace visible cuando el usuario comienza a desplazarse por la página.
Paso 1
Añadir HTML: Cree un botón que lleve al usuario a la parte superior de la página cuando haga clic en:
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
Paso 2
Añadir CSS: Estilo del botón:
#myBtn {
display: none; /* Oculto por defecto */
position: fixed; /* Posición fija / pegajosa*/
bottom: 20px; /* Coloque el botón en la parte inferior de la página. */
right: 30px; /* Coloca el botón 30px de la derecha. */
z-index: 99; /* Asegúrese de que no se superponga */
border: none; /* Quitar bordes */
outline: none; /* Quitar contorno*/
background-color: black; /* Establecer un color de fondo */
color: white; /* Color de texto */
cursor: pointer; /* Añadir un puntero del ratón en el hover */
padding: 15px; /* Algo de relleno */
border-radius: 10px; /* Esquinas redondeadas */
font-size: 18px; /* Aumenta el tamaño de la fuente */
}
#myBtn:hover {
background-color: #555; /* Añadir un fondo gris oscuro en el hover */
}
Paso 3
Añadir jаvascript:
// Cuando el usuario se desplaza hacia abajo 20 px desde la parte superior del documento, muestra el botón
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // Para safari
document.documentElement.scrollTop = 0; // Para Chrome, Firefox, IE y Opera
}
Inténtalo tú mismo >>Cómo crear un botón de desplazamiento hacia arriba ejemplo 2
Paso 1
Añadir CSS:#toTop{
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
display: none;
}
Paso 2
Añadir HTML:
<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 ---------->
Paso 3
Añadir jаvascript:$(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;
});
});
Inténtalo tú mismo >>Cómo crear un botón de desplazamiento hacia arriba ejemplo 3
Paso 1
Añadir CSS:/*Volver arriba */
#back_to_top{float:right;margin:-9px 0 0;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;}
Paso 2
Añadir HTML:<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 ---------->
<div id="back_to_top" class="btn btn-info"><a href="#"><i class="glyphicon glyphicon-chevron-up" style="color: #ffffff;"></i></a></div><!------ Incluya lo anterior en su etiqueta Footer ---------->
Paso 3
Añadir jаvascript: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;
});
});
});
Inténtalo tú mismo >>
Comentarios