A Scroll to Top button provides several benefits for websites. When readers reach the bottom of the page, they usually want to scroll to the top effortlessly. Using a button to quickly navigate back to the top without manually scrolling, especially on long pages, improves user experience.
Scroll to Top also helps vulnerable users who might find scrolling back up a long page tiring or difficult, particularly those with disabilities. A Scroll to Top button simplifies the process, improving accessibility. Also, for users who are not as comfortable with complex navigation, this button offers a clear and simple way to navigate a page efficiently.
When navigation is smoother, users are more likely to stay and engage, reducing the likelihood of abandonment.
Follow these steps to familiarise and configure a “Scroll to Top” button:
Scroll To Top Using Kadence
Kadence has built-in options for adding a Scroll to Top button, making it simple to enable and customize without needing custom code. Steps to enable and customize the Scroll to Top button in Kadence:
Scroll To Top Using Code
First, add the button HTML somewhere on your webpage, ideally at the bottom of the page (inside the <body>
<!-- Scroll to Top Button --> <button id="scrollToTopBtn" title="Go to top">↑</button>
You can style the button to make it look good and position it at the bottom-right of the screen. Here’s an example:
/* Scroll to Top Button Styles */ scrollToTopBtn { display: none; /* Hidden by default / position: fixed; / Fixed position on the screen / bottom: 20px; / 20px from the bottom / right: 20px; / 20px from the right / z-index: 99; / Ensures it's on top of other elements / background-color: #333; / Button background color / color: white; / Text color / border: none; / Remove borders / padding: 15px; / Padding inside the button / border-radius: 50%; / Make it a circular button / cursor: pointer; / Pointer cursor on hover / font-size: 18px; / Font size for the arrow */
} scrollToTopBtn:hover {background-color: #555; /* Darker background on hover */
}
Change the colors and padding to your preference.
Scroll To Top Using A Plugin
We do not recommend using extra plugins because too many can cause performance and conflict issues. However, if you want to add a Scroll to Top feature because your site doesn’t use Kadence and or you don’t like adding code, then here’s how you can do it using a plugin:
For caching your website, we highly recommend Litespeed Caching or WP Rocket.
NOTE: If some of these options are unavailable, you most likely do not have the Kadence Pro installed.
