How to Create a Scroll Back to Top Button In WordPress with Smooth Move

The scroll back to top button is a useful feature for any website, as it allows users to quickly navigate back to the top of the page. WordPress is no exception, and adding a scroll back to the top button to your website can be done with just a few clicks.

Without back to top button, your visitor might leave your site instead of scrolling all way to the top. Fortunately, creating a scroll back to the top button in WordPress is very easy and simple.

What Is A Back To Top Button?

It’s a button that comes with an arrow icon that allows you to scroll to the top of the page. When you are at the bottom of the page, you can use this button to scroll to the top without even scrolling by yourself.

Most of the themes have this button when the user clicks it, the user is directed to the top of the page.

Create a Scroll Back-to-Top Button Manually

To add this button, go to header.php of your theme and add the button right after the wp_body_open().

<button class="to-top" onclick='window.scrollTo({top: 0, behavior: "smooth"});'>
    <?php esc_html_e('Top', 'text-doamin'); ?>
</button>

The code on the “onclick” is a JavaScript code that moves the user to the top of the page smoothly.

Add Scroll Back-to-Top Button with Plugin

The second step but easiest step to adding a scroll back to the top button to your WordPress website is to install a plugin. There are several plugins available for this purpose, such as Scroll Back To Top, which is a free plugin. Once you have installed and activated the plugin, you will need to configure it.

An easy-to-use, intuitive interface, a WordPress plugin that gives you the ability to easily and safely create a scroll back to the top button on your WordPress website.

Shopping Cart