Feature Request: Add Scroll to Top Button on FAQ Page #1009
Description
Feature Request: Add Scroll to Top Button on FAQ Page
Description
The FAQ page contains multiple questions and answers, which can make the page quite long. Users currently need to manually scroll all the way back to the top after reading the content. Adding a Scroll to Top button would improve navigation and overall user experience.
Proposed Solution
Add a floating Scroll to Top button that appears when the user scrolls down the FAQ page. When clicked, it should smoothly scroll the page back to the top.
Expected Behavior
Button appears after the user scrolls down a certain distance (e.g., 200px).
Button stays fixed at the bottom-right corner of the screen.
Clicking the button smoothly scrolls the page to the top.
Button should match the existing ExpenseFlow UI theme (dark/light mode compatible).
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;
}
JavaScript:
const scrollBtn = document.getElementById("scrollTopBtn");
window.onscroll = function () {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
scrollBtn.style.display = "block";
} else {
scrollBtn.style.display = "none";
}
};
scrollBtn.onclick = function () {
window.scrollTo({
top: 0,
behavior: "smooth"
});
};
Benefits
Improves usability on long pages
Enhances user experience
Simple and lightweight implementation
Works on both desktop and mobile devices