Botón scroll hacia arriba en WordPress sin plugins

En este artículo veremos cómo añadir la funcionalidad de ir hacia arriba a través de un botón en WordPress, lo haremos directamente a través de código evitando el uso de plugins adicionales.

Resultado Final

Código PHP para crear la estructura de botón

Usaremos el hook wp_footer para generar código HTML al final de la página, este código HTML creado con PHP define la estructura del botón.

add_action("wp_footer", "dcms_add_arrow_top");
function dcms_add_arrow_top(){
    echo "<a id='scrolltop' class='arrow-top'>🔝</a>";
}

Puedes agregar este código en el archivo function.php de tu tema hijo

Si deseas puedes cambiar el emoji por una imagen, asegúrate de usar la ruta absoluta para hacer referencia a la imagen.

Código Javascript para definir el comportamiento

El comportamiento de scroll es responsabilidad del navegador, por lo tanto necesitamos usar código Javascript.


(function( $ ) {
        'use strict';
    
    $('#scrolltop').hide();

    $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
            $('#scrolltop').fadeOut();
        } else {
            $('#scrolltop').fadeIn();
        }
    });
    
    $('#scrolltop').on('click', function(){
        $('html, body').animate({scrollTop:0}, 'fast');
        return false;
    });

})( jQuery );

Para agregar código Javascript en WordPress puedes revisar Insertar javascript en WordPress de forma correcta.

En el código anterior:

Primero ocultamos el botón ya que al cargar no será necesario mostrarlo
Definimos un evento scroll que hará aparecer o desaparecer el botón dependiendo de la posición del scroll
Definimos un evento de click que moverá el scroll con una animación hacia la parte superior

Código CSS para estilizar el botón

Adicionalmente al código PHP y Javascript, será necesario darle un posicionamiento y apariencia al botón creado, esto lo hacemos a través de código CSS.

.arrow-top{
    background-color: orange;
    width: 50px;
    height: 50px;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    cursor:pointer;
    position: fixed;
    right: 20px;
    bottom: 20px;  
    z-index: 99999;
}

Para agregar código CSS en WordPress puedes revisar Agregar CSS en WordPress de manera correcta.

Conclusión

Como has podido comprobar, puedes agregar una funcionalidad de botón que realice scroll hacia arriba de la página de manera simple directamente a través de código y evitar el uso de un plugin adicional.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.