Add back-to-top button easily with Bricks Builder without using an extra plugin

Let’s begin constructing our back-to-top button using Bricks Builder

Currently, Bricks Builder does not have a built-in element specifically for a back-to-top button, although there are additional Bricks plugins available that can provide this functionality. However, what if we prefer not to add extra plugins solely for this purpose?

In this tutorial, we’ll explore how to achieve this without any additional hassle.

To begin, we need to determine whether we want to add our button to the Header or Footer template. Both options are valid, but it’s essential to select the one that appears most frequently on your site. Keep in mind that if you choose the Header and it’s set to sticky functionality, it may lead to some issues, so in most cases, adding it to the Footer is the better option. This ensures that the back-to-top button will function smoothly without any complications.

After you’ve decided which template is best suited for your needs

Go to Bricks > Templates > Choose your template and Edit with Bricks.

In my case, it going to be the Footer Template.

Add a button element and style it according to your preferences

(Ensure that you set it to a fixed position.)

Next, we’ll link our button to an anchor that scrolls us to the top of the page. Usually, we use the Header ID, because the Header always remains at the top of our page, which in our case is “#brx-header“. This ensures a seamless scrolling experience to the top of the webpage when the back-to-top button is clicked.

Do you have a sticky header?

However, there’s a catch. If your Header has sticky functionality, you’ll need to add an extra element on top of your Header so that your back-to-top button can be linked to it. To achieve this, you can either utilize a child theme or, if you have a code snippet plugin, you can add the following code snippet to your functions:

add_action('bricks_before_header', 'c_do_before_header_backtoptop');
function c_do_before_header_backtoptop(){
	echo '<div id="backToTop"></div>';
}

the following code will create the extra <div id=”backToTop”></div> on top of our Header tag

It’s crucial to ensure that the ID used in the anchor link matches the ID added to the back-to-top button. This alignment ensures that clicking the button will smoothly scroll the page to the specified section, enhancing user experience.

That’s it, you just create a back-top-top button using Bricks Builder!!!