Botón de subir arriba sin plugins

Si tienes elementor Pro no puedes colocar el clásico botón de subir arriba sin plugins ni usar Code Snippets.

Elementor pro incluye todo lo necesario para no tener que instalar nada más, y lo mejor de todo es que lo haremos en menos de un minuto.

Primer paso: crear el botón

Pues tan simple como crear un botón con el widget «Botón» pero como queremos que aparezca en todas las páginas de nuestra web, lo pondremos en un lugar que siempre aparece: el footer.

He dicho que uses el widget de botón pero puedes usar otro como el widget de icono, simplemente a mi me gusta mas el botón.

Por supuesto, estamos hablando de un pie de página creado con el maquetador de temas de elementor Pro.

Asi pues nos vamos a editar el pie de página y colocamos un botón sin texto, solo con el icono de la flecha hacia arriba o cualquier otro que te guste, no importa donde lo pongas porque lo fijaremos a la parte inferior derecha, algo como esto:

Ahora en el campo del enlace has de poner #inicio

Se trata de que el botón enlace a un ancla con destino a la cabecera, la idea es bien simple.

Para fijar el botón has de ir a los ajustes avanzados del widget y en la pestaña Disposición buscar el campo Posición y escoger Fijo en el desplegable.

Ahora has de indicar la orientación horizontal y vertical para que quede justo donde quieres.

El destino del enlace ancla

Toca decir donde queremos que vaya ese enlace, lo normal es que vaya a la parte superior de la web, o sea a la cabecera.

Por lo tanto nos iremos al editor de temas y editaremos el header, en el contenedor que haya mas arriba, le pondremos el ID de CSS inicio (ojo, sin el símbolo #).

De esta forma, cuando se clique el botón, se enlazará a la parte superior.

Pero cuidado, si nuestra cabecera es fija, el enlace no funcionará porque el ancla siempre está arriba.

¿Cómo solucionarlo? fácil, creamos un contenedor vacío encima del contenedor del header y le quitamos los rellenos (en Avanzado / Disposición / Relleno) para que no ocupe espacio.

A continuación le ponemos al nuevo contenedor ese ID de CSS inicio.

Con esto ya tenemos el problema solucionado, pero vamos a mejorarlo un poco.

Ocultar el botón cuando no sea necesario

Efectivamente, hay algo que chirria, incluso cuando la página está arriba del todo, nos aparece el botón y eso no es necesario.

Vamos a hacer que desaparezca cuando no hace falta y que se muestre cuando hacemos algo de scroll.

Para ello nos vamos al pie de página para hacer unos cambios, primero seleccionaremos el botón y nos iremos a la pestaña avanzado y a CSS personalizado, ahí pegaremos este código, no te asustes pero en ese momento desaparecerá nuestro botón porque aún falta el fragmento de Java.

				
					selector{
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
body.show selector{
    opacity: 1;
}

Ahora hemos de pegar un widget de HTML y pegar el fragmento que te dejo.

Da igual donde lo pongas ya que no se va a ver, pero por tenerlo todo en orden, lo puedes poner poner a continuación del botón.

				
					<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var offset = 400
$(window).on('load scroll', function(){
    
    if( $(window).scrollTop() > offset ){
        $('body').addClass('show')
    }else{
        $('body').removeClass('show')
    }
})
</script>

Ya puedes poner un Botón de subir arriba sin plugins

Parece que el mundo se acabe cuando no hay un plugin que hace lo que necesitamos, a veces la solución está mas cerca de lo que pensamos y unas simples líneas de código solucionan problemas importantes.

Suscríbete a mi Newsletter y recibirás avisos con soluciones como esta.