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

Used before category names. Blog JavaScript WordPress WordPress Development

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

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

Tags: