How To Create a Scroll To Top Button In WordPress

How To Create a Scroll To Top Button

In WordPress, the “Twenty Twenty-Three” theme (if it exists) would likely follow conventions similar to earlier default themes in terms of structure and style. To add a “Back to Top” scroll button without using a plugin, you can manually insert a few lines of code in your theme files. Here’s how:

1. Add the HTML:

Open footer.php in your theme. Before the closing </body> tag, add:

<a id="back-to-top" href="#" class="btn-back-to-top" title="Back to top">&#8679;</a>

the page. The ⇧ part is a Unicode character for the upward arrow, but you can replace it with any text or symbol you prefer.

2. Add the CSS:

Open style.css in your theme and add:

.btn-back-to-top {
position: fixed;
bottom: 50px;
right: 50px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
cursor: pointer;
colour: red;
padding: 10px;
border-radius: 4px;
display: none;
}

.btn-back-to-top:hover {
background-color: #555; /* Color change on hover */
}

This will style your button. The button will be fixed on the bottom right side of your site and will initially be hidden (display: none).

3. Add the JavaScript:

To make the button appear when scrolling down and disappear when near the top, you can use some JavaScript.

Open the footer.php again and before </body>, add:

<script>
    let backToTopButton = document.getElementById("back-to-top");

    window.addEventListener("scroll", () => {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            backToTopButton.style.display = "block";
        } else {
            backToTopButton.style.display = "none";
        }
    });

    backToTopButton.addEventListener("click", function() {
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For other browsers
    });
</script>

This code listens for scroll events and toggles the visibility of the “Back to Top” button. It also smoothly scrolls you to the top of the page when clicked.

Remember to always backup your website before making changes to theme files, and preferably, create a child theme so your customizations aren’t lost when the main theme updates.

How To Create a Scroll To Top Button In WordPress