How to make a Back To Top button in Bricks Builder

As we all know back to top button element is already in the planned roadmap of Bricks Builder, while we are waiting for it we can still have a back to top button by using this tutorial.

NOTE: Be sure to enable the Code Execution option in settings.

JavaScript code of our Back to top button. #scroll is our icon ID Selector and the 600 is the value in pixels that our content should be scrolled vertically for our back to top button to appear.

UPDATE: Paste this code on a new code block to support smooth scroll on Safari Browser.

<script src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script>

CODE:

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


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>
×