WIDGET DE DESPLAZAMIENTO SIMPLE HACIA ARRIBA
Queremos crear un botón hacia arriba HTML en nuestra web, que permita a los visitantes hacer clic sobre él, y subir automáticamente al comienzo del texto de la página web.
Con este botón hacia arriba HTML mejorará la experiencia de usuario de su sitio web con una flecha muy simple que se desvanece cuando los visitantes comienzan a desplazarse por la página. La página se desplaza suavemente hacia arriba cuando se hace clic en el botón.
Puede ver la demostración en vivo y probar el desplazamiento hacia abajo. Observamos que en la esquina inferior derecha del sitio aparecerá la flecha o botón hacia arriba HTML.
HTML
Agregamos el enlace a continuación en cualquier lugar a su fuente HTML, por ejemplo en el pie de página antes de la etiqueta de cierre </body>. Para WordPress, use footer.php o cualquier otro archivo de plantilla que se muestre en todas las páginas. El enlace tiene un identificador único, un título de información sobre herramientas y contiene un carácter de flecha especial , (➤) por lo que no tenemos que usar una imagen para mostrar la flecha.
<a id="back2Top" title="Back to top" href="https://doodom.com" style="display: none;">➤</a>CSS
Incluye la hoja de estilo y ajústala si el diseño de tu sitio web lo requiere. Establezca el tamaño, los colores, la posición y el efecto de desplazamiento de la flecha. El carácter de flecha HTML que usamos originalmente apuntaba hacia la derecha y este código CSS lo gira en sentido contrario a las agujas del reloj para que apunte hacia arriba.
#back2Top {
width: 40px;
line-height: 40px;
overflow: hidden;
z-index: 999;
display: none;
cursor: pointer;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
position: fixed;
bottom: 50px;
right: 0;
background-color: #DDD;
color: #555;
text-align: center;
font-size: 30px;
text-decoration: none;
}
#back2Top:hover {
background-color: #DDF;
color: #000;
}
JavaScript
Agregue este código JavaScript al tema de su sitio web y asegúrese de usar jQuery.
El script verifica la posición de altura en cada desplazamiento de página y se desvanece en el widget si ha alcanzado el límite de 100 px, mientras que otro detector de eventos detecta los clics del botón y se desplaza suavemente hacia la parte superior de la página.
/*Scroll to top when arrow up clicked BEGIN*/
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 100) {
$('#back2Top').fadeIn();
} else {
$('#back2Top').fadeOut();
}
});
$(document).ready(function() {
$("#back2Top").click(function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
});
/*Scroll to top when arrow up clicked END*/