Som Ramnani - feat(scroll-to-top-button): add scroll to top button component & remove querySelector workarounds

[somramnani]

NOT READY FOR REVIEW. PLEASE DO NOT REVIEW YET.

Description

This PR replaces the inconsistent legacy “Back to Top” implementations with a reusable global React component.

Previously:

• The control was hard-coded in HTML and displayed inconsistently across routes.
• Resource Usage had a separate page-specific implementation.
• Dashboard and pages using nested scroll containers did not reliably display the button.
• Several pages directly manipulated the legacy element using document.querySelector.
• The button behavior and styling differed between pages.

The new button appears on every route once the active page or nested container has scrolled more than 100px. Clicking it smoothly returns the active scroll container to the top.

Related PRS (if any):

This frontend PR is related to the issue in #5124

Main changes explained:

• Create a reusable ScrollToTopButton component with:
  • A configurable scroll threshold, defaulting to 100px.
  • Support for root, document, window, and nested scroll containers.
  • Smooth scrolling to the top.
  • Reduced-motion support.
  • Accessible button markup and keyboard behavior.
  • Responsive light and dark mode styling.
• Mount the component globally from App.jsx.
• Display the button on every route based only on the scroll threshold; there are no route exclusions.
• Render the button through document.body to prevent it from being clipped by page overflow containers.
• Remove the page-specific Resource Usage implementation.
• Remove legacy .top and .back-to-top HTML anchors and global styling.
• Remove page-level querySelector logic that previously hid or controlled the legacy button.
• Add tests covering:
  • The 100px visibility threshold.
  • Root, document, window, and nested container scrolling.
  • Smooth and reduced-motion scrolling.
  • Accessibility.
  • Event-listener cleanup.

How to test:

1. Check out the current PR branch.
2. Ensure Node.js 20 or later and Yarn 1.22 are installed.
3. Run npm install and start the app locally.
4. Clear site data/cache.
5. Log in as an admin user.
6. Navigate to /dashboard:
   • Confirm the button is hidden before scrolling 100px.
   • Scroll more than 100px.
   • Confirm a circular arrow button appears in the bottom-right corner.
   • Click it and confirm the active page/container smoothly returns to the top.
7. Repeat the test on:
   • /communityportal
   • /communityportal/reports/resourceusage
   • /TotalOrgSummaryEmail
   • Any other page with more than 100px of vertical scrolling.
8. Verify pages containing nested scroll containers also display the button and scroll the correct container to the top.
9. Confirm only one scroll-to-top button is displayed and the URL hash does not change when it is clicked.
10. Verify the button in light mode, dark mode, desktop, and mobile layouts.

Screenshots or videos of changes:

PR.5435-Demo.mov

PR.5435-Demo-2.mov

Note:

• The button is intentionally hidden until the active scroll container passes 100px.
• There are no route-specific exclusions.
• Pages that cannot scroll beyond 100px will not display the button.
• No backend changes or migrations are required.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	18e0635
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a7cc83a72d8a9000884428d
😎 Deploy Preview	https://deploy-preview-5435--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud