processing-website icon indicating copy to clipboard operation
processing-website copied to clipboard

Feature : Scroll to Top Button for Improved User Experience

Open antriksh-9 opened this issue 1 year ago • 2 comments

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.

antriksh-9 avatar Jan 11 '24 14:01 antriksh-9

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

vaishnavi192 avatar Feb 03 '24 16:02 vaishnavi192

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

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

vaishnavi192 avatar Feb 03 '24 17:02 vaishnavi192