Botón volver arriba

En este ejemplo de landing page se utiliza una barra de navegación fija en la parte superior que incluye el salto a la parte superior de la página por lo que siempre se puede regresar sin más.

Pero en las pantallas de los móbiles esta opción es más bien incómoda. Esto se soluciona con un botón flotante que se mantiene fijo mientras se hace scroll en la página y que apunta al inicio de ésta.

Volvemos a usar el evento de scroll, en esta ocasión para mostar u ocultar ese botón flotante de vuelta arriba.

Javascript para el botón flotante

El botón se escribe en HTML como un bloque incialmente oculto, algo parecido a la ventana lightbox. Se puede crear con una imagen o con un icono como en este ejemplo. Debe contener el enlace al inico de la página, como es un enlace interno se verá afectado por el scroll automático que definímos en otro script.

</div>

Lleva asociado un poco de CSS, como es habitual. Define tamañño, aspectos, y lo deja inicialmente oculto. La posición es fixed para mantenerlo en el sitio donde lo coloquemos aunque se haga scroll.

#botup{

position: fixed;

display: none;

top: 0px;

left: 100px;

font-size: 3rem;

width: 3rem;

height: 3rem;

border-radius: 50%;

line-height: 1;

text-align: center;

background-color:orange

}

Cuando la parte superiopr de la ventana desaparece de la vista, al hacer scroll, este botón se debe volver visible. Y cuando volvamos al inicio de la página el botón debe volver a ocultarse.

Y esto es posible gracias al evento scroll. Le asociamos a window.scroll el script que se encarga de mostrar u ocultar este botón, con el enlace a la parte inicial de la página.

window.addEventListener("scroll", upbuton, true);

Y ahora el controlador asociado a este evento, en este caso con un simple display hidden-block. Aunque también podría usarse un cambio de opacity 1 a 0 (visible/invisible) con una transition: opacity 800ms para que el botón aparezca o desaparezca de manera gradual.

function upbuton() {

var bot = document.getElementById('botup');

if (window.pageYOffset > 10) {

let botStyle = parseInt(window.getComputedStyle(bot);

let offset = bot.Style.getPropertyValue('font-size')) * 2 + 10;

bot.style.top = document.documentElement.clientHeight - offset + "px";

bot.style.left = document.documentElement.clientWidth - offset + "px";

bot.style.display = "block";

} else{

bot.style.display = "none";

}

Como ves se trata tan solo de buscar la ubicación que veamos más adecuada y mostrar el botón. Yo he escogido como posición la esquina lateral derecha de la página y la anoto en los style.top, style.left. Estos valores dependen del tamaño de la pantalla, por eso se colocan de manera dinámica en lugar de colocarlos en la definición de estilos.