Feature Request: Add Scroll to Top Button on Blog Page #1011
Description
Feature Request: Add Scroll to Top Button on Blog Page
Description
The Blog page contains multiple articles and long content sections. Users currently need to manually scroll back to the top after reading posts. Adding a Scroll to Top button would improve navigation and enhance the user experience.
Proposed Solution
Implement a floating Scroll to Top button that appears when the user scrolls down the page. When clicked, it should smoothly scroll the user back to the top of the page.
Expected Behavior
The button should appear after the user scrolls down a certain distance (e.g., 200px).
It should stay fixed at the bottom-right corner of the screen.
Clicking the button should smoothly scroll the page to the top.
The button should be responsive and work on both desktop and mobile devices.
It should match the ExpenseFlow theme and styling.
Possible Implementation
HTML
↑
CSS
#scrollTopBtn {
position: fixed;
bottom: 30px;
right: 30px;
display: none;
padding: 10px 14px;
border: none;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
z-index: 1000;
}
JavaScript
const scrollBtn = document.getElementById("scrollTopBtn");
window.addEventListener("scroll", () => {
if (document.documentElement.scrollTop > 200) {
scrollBtn.style.display = "block";
} else {
scrollBtn.style.display = "none";
}
});
scrollBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
Benefits
Improves usability on long blog pages
Provides quick navigation for users
Enhances overall user experience
Lightweight and easy to implement