Scroll Back to Top button is a feature added to most websites that lets you quickly scroll back to the top of the page. This feature is useful in websites which have long webpages, like forums or content websites that require a lot of scrolling.
Adding this feature would also improve the user-experience of your website as users don’t have to scroll back or reload when they want to reach the top of the page.
This can be done in any webpage by adding a bit of HTML and CSS code to style the “Back to Top” button. To add the automatic scrolling feature we would also use some JavaScript code.
If you are adding this functionality to a normal html website then add the following html code to your website. To add this button to a WordPress website follow these steps.
ADD THE BUTTON TO THE HTML OF YOUR WEBSITE
<!-- Scroll to Top Button -->
<button onclick="topFunction()" id="topBtn" title="Go to top">Top</button>ADD THIS CODE TO THE CSS FILE TO STYLE THE BUTTON
#topBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed position */
bottom: 20px; /* Place the button at the bottom */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: #555; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
}
#topBtn:hover {
background-color: #000; /* Add a dark-gray background on hover */
}JAVASCRIPT CODE
// Get the button
let topBtn = document.getElementById("topBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
topBtn.style.display = "block";
} else {
topBtn.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}Working Demo of Scroll Back to Top Button
See the Pen Untitled by Praveen Singh (@Praveen-Singh-the-decoder) on CodePen.
However, this code would take you to the top of the page in an instant. If you are looking for the scrolling animation when you click on the button, then you will have to modify the JavaScript code.
Below, we have given the steps to add this button to a WordPress website. The button would use the smooth scrolling animation to scroll back to the top of the page when clicked. The scrolling animation starts slow and then speeds up giving a smooth scrolling appearance to the page.
How to Add the Scroll To Top Button in WordPress (With Smooth Scrolling Animation)
In WordPress you can add the html code either to the footer.php file present inside your theme directory or you can add it to the functions.php file also present in the theme directory. The theme directory is usually present in
https://example.com/wp-content\themes\theme-folder\However, you can also add the html code to the functions.php file in your theme directory. Add the following code to your theme’s functions.php file. Add the following code at the end of the file and save the changes.
function back_to_top() {
echo '<span id="totop" role="button" aria-label="scroll up" tabindex="0"><svg id="totop-icon" role="img" aria-label="icon" viewBox="0 0 32 32"><polygon points="32 21.45 16 7.794 0 21.45 2.747 23.794 16 12.483 29.253 23.794 32 21.45" style="fill:#e6e6e6"/></svg></span>';
}
add_action( 'wp_footer', 'back_to_top' );The code would add a <span> with “totop” id in the footer of your website. The code also contains the SVG code for the icon that we would use to style the button. This method allows us to avoid installing or linking to font packages like Font-Awesome, that unnecessarily increase the file size of your webpage.
After adding the above code to your theme’s functions.php file you will have to add the following CSS code to your theme’s style.css file.
#totop {
right: 25px;
position: fixed;
bottom: 115px;
right: 20px;
z-index: 99;
background-color: red;
cursor: pointer;
height: 36px;
width: 36px;
border-radius:100%;
opacity: 0.5;
transition: opacity 0.5s ease-out;
}Then add the following JavaScript file to your theme’s function.php file. The JavaScript file does the actual magic of adding the smooth scrolling feature.
function add_custom_scroll_script() {
?>
<script type="text/javascript">
( function() {
const scrollButton = document.getElementById('totop');
if (!scrollButton){
return;
}
scrollButton.addEventListener('click', function(){
if (document.scrollingElement.scrollTop === 0) return;
const cosParameter = document.scrollingElement.scrollTop / 2;
let scrollCount = 0, oldTimestamp = null;
function step (newTimestamp) {
if (oldTimestamp !== null) {
scrollCount += Math.PI * (newTimestamp - oldTimestamp) / 1000;
if (scrollCount >= Math.PI) return
document.scrollingElement.scrollTop = 0;
document.scrollingElement.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount);
}
oldTimestamp = newTimestamp;
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
});
}() );
</script>
<?php
}
add_action('wp_footer', 'add_custom_scroll_script');After saving these changes to the functions.php file and style.css of your website, reload the page by pressing Ctrl + F5 button. The button would appear when you start scrolling down the page.