Como añadir un Back to top button en Genesis Framework

En esta entrega de snippets WordPress vamos a ver cómo añadir un back to top button en un Child theme de Genesis Framework. Es una solución súper fácil de seguir, rápida y elegante.

Pero, ¿a qué me refiero con un botón back to top? Pues si te fijas, al hacer scroll down (hacia abajo) en mi web, aparece un botón en la esquina inferior derecha para volver arriba de una forma suave y automática. Ese es el botón to top que vamos a aprender a añadir en Genesis.

Para ello, necesitaremos algo de php, css, una imagen svg y por último un pequeño script. Pero como siempre, no te preocupes. No hace falta que sepas de programación. Simplemente haz lo que yo en el vídeo y llegarás al mismo resultado. :) Además te dejo todos estos snippets abajo.

Tutorial paso a paso para poner un botón back to top en tu web + códigos necesarios.

En total son 4 sencillos pasos y te guío en todo momento en el vídeo.

Copia el siguiente snippet y pégalo al final de tu archivo functions.php

// Enqueue To Top script
add_action( 'wp_enqueue_scripts', 'to_top_script' );
function to_top_script() {
    wp_enqueue_script( 'to-top', get_stylesheet_directory_uri() . '/js/to-top.js', array( 'jquery' ), '1.0', true );
}

// Add To Top button
add_action( 'genesis_before', 'genesis_to_top');
	function genesis_to_top() {
	 echo '<a class="to-top" title="Back To Top" href="#0">Top</a>';
}

Si ya has pegado el snippet en tu functions.php pasamos al siguiente paso.

A continuación te dejo los estilos del botón. Este código CSS debe ir al final de tu hoja de estilos. Como puedes ver, incluye las media queries para que se vea bien en todos los dispositivos.

/*Clases del botón to top*/

.to-top {
	display:inline-block;
	height:40px;
	width:40px;
	position:fixed;
	bottom:40px;
	right:10px;
	box-shadow:0 0 10px rgba(0,0,0,0.05);
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	background:rgba(232,98,86,0.8) url(images/to-top.svg) no-repeat center 50%;
	visibility:hidden;
	opacity:0;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	transition:all .3s;
}

.to-top.top-is-visible {
	visibility:visible;
	opacity:1;
}

.to-top.top-fade-out {
	opacity:.5;
}

.no-touch .to-top:hover {
	background-color:#e86256;
	opacity:1;
}

@media only screen and (min-width: 768px) {
	.to-top {
		right:20px;
		bottom:20px;
	}
}

@media only screen and (min-width: 1024px) {
	.to-top {
		height:60px;
		width:60px;
		right:30px;
		bottom:30px;
	}
}

Si ya has pegado el código CSS en tu hoja de estilos vamos a por el siguiente paso.

Crea un archivo llamado to-top.js y añade el código que te dejo a continuación dentro.

jQuery(document).ready(function($){
	// Scroll (in pixels) after which the "To Top" link is shown
	var offset = 300,
		//Scroll (in pixels) after which the "back to top" link opacity is reduced
		offset_opacity = 1200,
		//Duration of the top scrolling animation (in ms)
		scroll_top_duration = 700,
		//Get the "To Top" link
		$back_to_top = $('.to-top');

	//Visible or not "To Top" link
	$(window).scroll(function(){
		( $(this).scrollTop() > offset ) ? $back_to_top.addClass('top-is-visible') : $back_to_top.removeClass('top-is-visible top-fade-out');
		if( $(this).scrollTop() > offset_opacity ) { 
			$back_to_top.addClass('top-fade-out');
		}
	});

	//Smoothy scroll to top
	$back_to_top.on('click', function(event){
		event.preventDefault();
		$('body,html').animate({
			scrollTop: 0 ,
		 	}, scroll_top_duration
		);
	});

});

Ahora, guarda este archivo en la carpeta js de tu child theme. Si no tienes esta carpeta créala. Simplemente es crear una carpeta llamada js.

Te dejo aquí la imagen SVG que tienes que guardar en la carpeta images de tu child theme:

Imagen en SVG

Conclusión

Añadir un botón back to top en los Child Themes de Genesis Framework es realmente sencillo. Y como ves, queda estupendamente. Así no tendrás que utilizar un plugin para algo tan trivial.

Espero que te haya gustado y ya sabes que si tienes cualquier duda puedes utilizar el formulario de soporte para alumnos.

Si no eres suscriptor te informo de que cada semana publico nuevos snippets para complementar todo lo que aprendemos en mis Cursos de WordPress Online.

A día de hoy hay un total de 108 clases publicadas con más de 216 vídeos .

¡Nos vemos pronto con un nuevo snippet!