Feature : Scroll to Top Button for Improved User Experience

[antriksh-9]

On processing website a back-to-top button isn't present which is a common website feature.

I propose adding a "Scroll to Top" button that becomes visible as the user scrolls down the website page.
Tapping this button would smoothly scroll the user back to the top, providing a convenient and efficient way to navigate lengthy content.

I want to work on this issue.

[vaishnavi192]

@antriksh-9 are you working on this issue or I can take up?

[vaishnavi192]

I suggest to do the following changes... in HTML,CSS,js file
HTML
Top

CSS
#scrollToTopBtn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #007bff;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 50%;
}

#scrollToTopBtn.show {
display: block;
}
js
// 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) {
document.getElementById("scrollToTopBtn").classList.add("show");
} else {
document.getElementById("scrollToTopBtn").classList.remove("show");
}
}

// When the user clicks on the button, scroll to the top of the document
document.getElementById("scrollToTopBtn").addEventListener("click", function() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
});
if this looks correct, Kindly assign me