feat(ux): add scroll-to-top and scroll-to-bottom floating buttons#562
Open
Ridanshi wants to merge 1 commit into
Open
feat(ux): add scroll-to-top and scroll-to-bottom floating buttons#562Ridanshi wants to merge 1 commit into
Ridanshi wants to merge 1 commit into
Conversation
…ruti070107#527) Adds two circular floating action buttons that let users navigate long dashboard pages without manual scrolling. Behaviour ───────── • Scroll-to-top (↑): visible only when .main-area.scrollTop > 300 px. • Scroll-to-bottom (↓): visible only when the user is not already within 300 px of the page bottom. • Both buttons are hidden when the page is not scrollable (scrollHeight ≤ clientHeight). • Scroll listener is passive and RAF-throttled (single requestAnimationFrame per scroll burst) — no layout thrash. • Buttons re-evaluate on every view change via the regenx:viewchanged event dispatched from showView(), so short pages stay clean. Placement & z-index ──────────────────── • Position: fixed; right: 20px — stacked above the existing accessibility trigger (bottom: 20px) at bottom: 80px (↓) and bottom: 128px (↑). • z-index: 1500 — above the modal overlay (1000), below the accessibility trigger (2100) and notification drawer (9998). Styling ─────── • Glassmorphism: var(--glass-bg) + backdrop-filter blur, matching the existing design language of glass-card, .glass-nav, and the accessibility trigger. • 40 × 40 px circles on desktop; 36 × 36 px on mobile (≤768 px). • Hover: fills with var(--green), scale(1.12), teal glow shadow. • focus-visible outline for keyboard accessibility. • CSS transitions on opacity, transform, background, and box-shadow. Accessibility ───────────── • aria-label="Scroll to top / Scroll to bottom" on both buttons. • Keyboard-operable (focus-visible ring). • Buttons are transparent to pointer events when hidden (pointer-events:none), so they never intercept clicks while invisible. Files changed ───────────── • index.html — two <button> elements before </body> • src/styles.css — .scroll-nav-btn styles + responsive overrides • src/app.js — initScrollNav() IIFE inside DOMContentLoaded; regenx:viewchanged event fired from showView() • scripts/test-scroll-buttons.mjs — 17 test cases, 25 assertions Tests: 25 passed, 0 failed. Closes Shruti070107#527
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #527
Summary
Adds two circular floating action buttons — scroll to top (↑) and scroll to bottom (↓) — that appear dynamically on long dashboard pages and disappear on short ones, with no impact on existing layout or behaviour.
Behaviour
scrollHeight ≤ clientHeight)scrollTop ≤ 300 pxscrollTop > 300 pxBoth buttons re-evaluate on every view navigation (via the
regenx:viewchangedevent dispatched fromshowView()), so switching to a short page immediately hides them.Scrolling targets
.main-area— the actualoverflow-y: autocontainer — notwindow, which hasoverflow: hidden.Placement & z-index
fixed; right: 20pxbottom: 80px— 8 px above the accessibility trigger (bottom: 20px, height: 52px)bottom: 128px— 8 px above scroll-to-bottomStyling
Matches the existing ReGenX glassmorphism language:
background: var(--glass-bg)withbackdrop-filter: blur(16px)border: 1px solid var(--border),box-shadow: var(--shadow-lg)var(--green),scale(1.12), teal glowopacity + transformtransitions; hidden buttons havepointer-events: noneAccessibility
aria-label="Scroll to top"/"Scroll to bottom"on both buttonsfocus-visibleoutline ring (2 px,var(--green))Performance
.main-arearequestAnimationFrame, one frame per scroll burst)Files changed
index.html<button>elements before</body>src/styles.css.scroll-nav-btnstyles + mobile responsive overridessrc/app.jsinitScrollNav()IIFE inDOMContentLoaded;regenx:viewchangedevent inshowView()scripts/test-scroll-buttons.mjsTest results
Scenarios covered: hidden at load, visible after scroll, bottom visibility thresholds, non-scrollable pages, scroll actions, boundary conditions, view-change reset, zero-height guard, missing-element guard, mobile size constants.