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

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen.

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>";
}

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 );

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;
}

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.