The WordPress back to top button is a single-click button that enables users to click and move to the top of the website. It is a tiny features that improve the user experience. According to a study, 8% to 14% of users click “Back to Top” on long product/category pages. And Minifly makes WordPress back to top button, a single toggle setup matter.
A single option that has great importance should be easy to set up. It was hard, but thanks to the Brainywp team, making it was made easier than ever. In this documentation tutorial blog, we will explore how to set up the WordPress back-to-top button. Of course, just a single toggle. We will also add the advanced customization options.
We also added other alternative options to add the same features. Just in case you want to compare which is the best plugin to add the back to top option to your WordPress site. Let’s get started.
How to Add a WordPress Back to Top Button Free 2025
Adding up back-to-top button to your WordPress site is a 2-step process right now. Install the Minifly Plugin and Toggle on the options.
#Step-1: Install and activate the Minifly WordPress plugin. This is similar to any other plugin installation. Log in to your WordPress admin panel, then go to the plugins. Then add new plugins and search for Minifly. Install and activate the plugin.
Minifly free version is available in the WordPress directory. In case you need a manual installation, download the file from the WordPress link.
During the installation, there will be a considerable notice. You can accept or skip it. No worry! And we collect non-sensitive data through Freemius to improve our services. And if you skip, you will get the same services, no problem.
After the activation, you will drive to the Minifly page. Under the “Website”, you can see Minifly back to top button. Toggle on and click on the save changes. Magic done! Your WordPress back to top option is done in the front end.
From now on, if any users scroll down the page, they can see the Back to top button in the most right corner of the page. All set. There’s more toggle and don’t forget to check them out. If you need more customization, we have the option too.
How to Customize Your Back to Top Button with Minifly Pro
You can unlock the WordPress back-to-top button customization with Minifly Pro. One upgrade will also bring dozens of advanced options.
Make sure you have activated the Minifly Pro license key to see this popup. In this popup, you can add back to the top button’s background and hover color. Adjust the color with your brand and click on the save. The color changes will be applied in back to the back-to-top WordPress button.
We are also working on more customization, like changing the style, making it a left-side button, and so on.
Our technical documents are completed here. However, we will not bind you inside our plugin only. Here are a few more ways you can implement the same features in your site.
How to Add a Back to Top Button to WordPress without a Plugin
Adding up scroll-to-top to a top button in WordPress without a plugin is technical. If you have necessary knowledge about WordPress themes and plugins, know HTML, JavaScript and PHP code, then try these options. Adding the back to top WordPress button brings a new concern that we have described at the bottom of this block.
You can add a Back to Top button to your WordPress site without using a plugin by adding custom HTML, CSS, and JavaScript to your theme.
Step 1: Add HTML for the Button
Edit your theme’s footer.php file from the theme editor options. Consider your live theme, whether it’s the main theme or a child theme. Add this just before the </body> tag.
<a href="#" id="back-to-top" title="Back to Top">↑</a>Step 2: Add CSS to Style the Button
You have successfully added the HTML. Now time to add some style to the button. Go to Appearance → Customize → Additional CSS, and paste this. You can customize the styles (color, size, position) as needed.
#back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
display: none;
background-color: #333;
color: #fff;
padding: 10px 15px;
font-size: 18px;
text-align: center;
border-radius: 5px;
text-decoration: none;
z-index: 9999;
transition: opacity 0.3s ease;
}
#back-to-top:hover {
background-color: #555;
}
Step 3: Add JavaScript to Show/Hide the Button and Scroll to Top
You can add this JavaScript in the footer using footer.php, or better yet, enqueue it via functions.php. First, let’s see how you can add inline JavaScript to the footer.php file. Just before the </body> tag, add:
<script>
document.addEventListener('DOMContentLoaded', function () {
var backToTop = document.getElementById('back-to-top');
window.addEventListener('scroll', function () {
if (window.scrollY > 300) {
backToTop.style.display = 'block';
} else {
backToTop.style.display = 'none';
}
});
backToTop.addEventListener('click', function (e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
</script>After this, click on the save changes and you have done it. Here is another way to add the same JavaScript code via the function.php file.
function mytheme_back_to_top_script() {
?>
<a href="#" id="back-to-top" title="Back to Top">↑</a>
<script>
document.addEventListener('DOMContentLoaded', function () {
var backToTop = document.getElementById('back-to-top');
window.addEventListener('scroll', function () {
if (window.scrollY > 300) {
backToTop.style.display = 'block';
} else {
backToTop.style.display = 'none';
}
});
backToTop.addEventListener('click', function (e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
</script>
<style>
#back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
display: none;
background-color: #333;
color: #fff;
padding: 10px 15px;
font-size: 18px;
text-align: center;
border-radius: 5px;
text-decoration: none;
z-index: 9999;
transition: opacity 0.3s ease;
}
#back-to-top:hover {
background-color: #555;
}
</style>
<?php
}
add_action('wp_footer', 'mytheme_back_to_top_script');
Congratulations. You now have a fully functional, lightweight Back to Top button without using any plugin.
While you update the theme, this code may go away. Especially if you update the theme via WordPress’s default system. You must make sure to keep the above code during the theme update. Otherwise, your back to top option will go away too.
Alternative Options to Add a Back to Top Button in a WordPress site
Like we said, there are multiple other WordPress plugins for a scroll-to-top button. If you want to check the Minifly Back to top button alternative, then this section is for you. We found many listed plugins. Then we have checked, tested and added the top 3 alternatives to the top button plugin in this section.
(1) WPFront Scroll Top
WPFront Scroll Top is the top WordPress scroll to top plugin. It has 200k+ active users with 130+ five-star ratings. You can enhance your site with a smooth “Scroll to Top” button that improves navigation. It appears when users scroll down and hides at the top.
No coding needed, just install and set up quickly. Customize the icon, color, position, and animation. Link to page sections or external URLs. Use text, image, or Font Awesome icons. Control visibility on mobile, iframes, or specific pages. Auto-hide the button after some time for a cleaner look. Built with accessibility and SEO in mind. It’s fast, lightweight, and works with any WordPress theme.
(2) To Top
To Top is another top scroll to top option plugin. This plugin is helping over 70,000 users worldwide, who have received 50+ solid five-star ratings. The To Top Plugin adds a floating button that appears when users scroll down. It’s perfect for long pages, making navigation easier and faster. You don’t need to edit any code. It works right away.
Customize the icon or image, set its size, shape, color, and position. Use the WordPress Customizer for live preview. The button can auto-hide, stay hidden on small devices, or even be disabled on admin pages. It improves user experience with smooth scrolling and quick access to the top.
(3) Smooth Back To Top Button
Smooth Back To Top Button is our last recommended WordPress Back to Top plugin for the same feature. It’s a lightweight, fast, and customizable tool that improves site navigation. It appears as users scroll down and smoothly takes them back to the top.
The button includes a progress indicator for better UX. You can change colors, size, position, scroll speed, and more. Choose from icon fonts, set custom CSS, and control visibility on small devices. It works with all WordPress themes, supports the admin panel, and uses async JavaScript for better performance.
Final Words and Recommendation
When you have single-click toggle solutions for back-to-top features, why wait? Go ahead and try Minifly today. As already said, you can change the theme and update the site, but Minifly keeps the features on the site. Thanks for reading this documentation blog. Don’t forget to share your experience with us.
If you take a moment to share this tutorial on your favorite social media, it will be a great support for us. And we believe your friends will benefit from the Minifly back to top button feature. If you need some more help, feel free to contact us. Have a good day.
