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

  • Comentarios de la entrada:Sin comentarios
  • Tiempo de lectura:2 minutos de lectura

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

 

 


Comparte en tus Redes Sociales:

Deja una respuesta

Los datos de carácter personal que consten en el comentario serán tratados por Solución Individual con la finalidad de publicar tu comentario así como enviarte a posteriori información comercial de aquellos productos o servicios que puedan ser de tu interés. La legitimación del tratamiento es tu consentimiento. Tus datos no serán cedidos a terceros. Tienes derecho a acceder, rectificar y suprimir tus datos, así como otros derechos como se explica en nuestra Política de Privacidad y Protección de datos