Skip to content

feat(ui): add reusable scroll-to-top FAB across long-content pages#291

Closed
JacobCoffee wants to merge 1 commit intomainfrom
scroll-to-top-button
Closed

feat(ui): add reusable scroll-to-top FAB across long-content pages#291
JacobCoffee wants to merge 1 commit intomainfrom
scroll-to-top-button

Conversation

@JacobCoffee
Copy link
Copy Markdown
Member

Summary

Adds a small `ion-fab` "scroll to top" button that appears once the user has scrolled past 400px and snaps the page back to the top on tap. Wired into 21 long-content pages.

How

  • New `ScrollToTopModule` + `ScrollToTopComponent` at `src/app/scroll-to-top/`.
  • Subscribes to the parent IonContent's `ionScroll` via `@Input() content`, toggles `visible` on threshold crossing (default 400px), unsubscribes on destroy.
  • Drop-in: `<app-scroll-to-top [content]="pageContent">` placed immediately before `` on each page (`#pageContent` template ref added to the IonContent).

Pages wired

schedule-list, speaker-list, sponsors, job-listings, sprints, rooms, room-detail, sponsor-detail, session-detail, keynote-speakers, lightning-talks, session-types, venues-hours, social-media, about-pycon, about-psf, coc, wifi, help, account, now.

`sponsor-detail` and `session-detail` also gained `scrollEvents="true"` so the inner subscription fires.

Skipped

`conference-map` and `expo-hall-map` — they own pinch-zoom interactions and an extra FAB at the same anchor would conflict.

Test plan

  • Scroll any of the listed pages past ~400px → small chevron-up FAB appears at bottom-right.
  • Tap FAB → smooth scroll to top, FAB hides.
  • FAB stays clear of the existing 80px bottom spacer used by long pages.
  • Schedule, conference-map, expo-hall-map pages NOT affected.
  • No layout shift on pages where content is shorter than the threshold.

🤖 Generated with Claude Code

@JacobCoffee JacobCoffee force-pushed the scroll-to-top-button branch 2 times, most recently from 9bb6d7a to c486fda Compare May 1, 2026 15:28
Adds a small floating button that appears once the user has scrolled
past 400px of content and snaps the IonContent back to the top on tap.

Implementation:
  - New ScrollToTopModule + ScrollToTopComponent at src/app/scroll-to-top/.
    Takes the parent's <ion-content> via @input, subscribes to ionScroll,
    toggles visibility on threshold cross, unsubscribes on destroy.
  - <app-scroll-to-top [content]="pageContent"> dropped inside ion-content
    on every long-content page (21 pages: schedule-list, speakers,
    sponsors, job-listings, sprints, rooms, room-detail, sponsor-detail,
    session-detail, etc.).
  - sponsor-detail and session-detail also gained scrollEvents="true" so
    the component's inner subscription fires.

conference-map and expo-hall-map are intentionally skipped — they own
pinch-zoom interactions where an extra FAB at the same anchor point
would conflict.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@JacobCoffee JacobCoffee force-pushed the scroll-to-top-button branch from c486fda to a4275fe Compare May 1, 2026 15:30
@JacobCoffee JacobCoffee closed this May 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant