logotipo-solucion-individual-nueva-era-400
excelente valoracion
Horario de Atención Telefónica
L a V de 9:00 a 14:00 y de 17:00 a 19:00
Excepto Festivos

Bricks 1.4 Tutorial Botón Ir Arriba (scroll top Button)

Índice de Contenido del Artículo

Aprenderemos a incorporar un botón de Ir Arriba (scroll top Button) con el constructor visual Bricks 1.4 para WordPress, ya que hasta esta versión no incorpora ningún elemento que lo realice.

Se trata de incorporar un pequeño código JavaScript dentro de la plantilla del pie de página del sitio web, pues tiene que estar incluido dentro de un elemento que se visualice en todo el sitio y el pie de página es un lugar muy apropiado para ello.

En este vídeo te explico cómo se hace

Tal como comento en el tutorial del vídeo, aquí os pongo el código JavaScript y CSS que necesitáis para que funcione el botón de Ir arriba (scroll top Button)

Código para poner en el elemento Código de Bricks

<script type="text/javascript">
var scrollTopBtn = document.querySelector('#scroll-TOP');


window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
scrollTopBtn.style.display = "block";
} else {
scrollTopBtn.style.display = "none";
}
}

scrollTopBtn.addEventListener('click', function(){
window.scroll({top: 0, left: 0, behavior: 'smooth'});
});
</script>

CSS personalizado para incluir en el botón Ir Arriba

<style>
root{cursor:pointer;}
</style>

 

Si necesitas el Tema Bricks para tu página Web, puedes descargarlo a un precio competitivo y con 1 año de actualizaciones, desde La Caja de Experiencia.

Quiero Descargar Bricks

 

No olvides suscribirte a mi canal de Youtube

suscribete youtube

 

 

Loading

avatar solind
Antonio Fernández
Apasionado por la creación de experiencias digitales. Mi objetivo es potenciar la presencia en Internet de Empresas y Marcas, mejorando su visibilidad en el mundo digital. [CEO de Solución Individual®] [SEO] [WordPress Expert]
Comparte en tus Redes Sociales:
landing-page-essential-1024x1024
¿Quieres Hacer una Factura en PDF sin complicarte con un programa de contabilidad?
redes sociales logo hacer facturaQuiero Verlo
¿Necesitas Textos Legales para tu Página Web o Tienda Online?
logo imasitioplus Textos Legales

Adapta fácilmente los Textos Legales para que tu Página Web cumpla con la LOPD (Ley Orgánica de protección de Datos), RGPD, LOPDGDD y LSSICE

Quiero Verlo
¿Necesitas Hosting para WordPress?
PULSA AQUÍ
banner-viajetravel-350px