WordPress : Botón scroll hacia arriba sin plugins

Lo he implementado en js/general.js

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.

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

add_action("wp_footer", "unidadvirtual_add_arrow_top");
function unidadvirtual_add_arrow_top(){
    echo "<a href='#' id='scrolltop' class='btn-arriba' title='Back To Top'></a>";
}

Código Javascript para definir el comportamiento

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

    $(window).scroll(function(){

		300 < $(this).scrollTop() ?  $('#scrolltop').addClass("top-is-visible") :
		$('#scrolltop').removeClass("top-is-visible top-fade-out"); 

		1200 < $(this).scrollTop()  &&  $('#scrolltop').addClass("top-fade-out");
        
    });
    

    $('#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

.btn-arriba {
    background-color: rgba(68, 113, 136, 0.8);
}
.btn-arriba {
    height: 40px;
    width: 40px;
    border-radius: 5px;
    position: fixed;
    bottom: 15px;
    right: 10px;
    text-indent: 100%;
     background: rgba(66,137,178,.8) url('ruta_imagen/to-top.png')  no-repeat center 50%; 
     visibility: hidden; 
     opacity: 0; 
    z-index: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.btn-arriba.top-is-visible {
    visibility: visible;
    opacity: 1;
}
.btn-arriba.top-fade-out {
    opacity: .5;
}

Plugin WPfront scroll top

Permite al visitante hacer scroll fácilmente a la parte superior de la página.

Versión 2.2 | Por Equipo WPFront | Ver detalles