From a4275fe416f2bf8f0e551f9f18b564bc626f0420 Mon Sep 17 00:00:00 2001
From: Jacob Coffee <jacob@z7x.org>
Date: Fri, 1 May 2026 09:43:34 -0500
Subject: [PATCH] feat(ui): add reusable scroll-to-top FAB across long-content
 pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/app/pages/about-psf/about-psf.module.ts   |  4 +-
 src/app/pages/about-psf/about-psf.page.html   |  4 +-
 .../pages/about-pycon/about-pycon.module.ts   |  4 +-
 .../pages/about-pycon/about-pycon.page.html   |  4 +-
 src/app/pages/account/account.html            |  4 +-
 src/app/pages/account/account.module.ts       |  4 +-
 src/app/pages/coc/coc.module.ts               |  4 +-
 src/app/pages/coc/coc.page.html               |  4 +-
 src/app/pages/help/help.module.ts             |  4 +-
 src/app/pages/help/help.page.html             |  4 +-
 .../pages/job-listings/job-listings.module.ts |  4 +-
 .../pages/job-listings/job-listings.page.html |  4 +-
 .../keynote-speakers.module.ts                |  3 +-
 .../keynote-speakers.page.html                |  4 +-
 .../lightning-talks/lightning-talks.module.ts |  3 +-
 .../lightning-talks/lightning-talks.page.html |  4 +-
 src/app/pages/now/now.module.ts               |  4 +-
 src/app/pages/now/now.page.html               |  4 +-
 .../pages/room-detail/room-detail.module.ts   |  3 +-
 .../pages/room-detail/room-detail.page.html   |  4 +-
 src/app/pages/rooms/rooms.module.ts           |  3 +-
 src/app/pages/rooms/rooms.page.html           |  4 +-
 .../schedule-list/schedule-list.module.ts     |  4 +-
 .../schedule-list/schedule-list.page.html     |  4 +-
 src/app/pages/schedule/schedule.html          |  4 +-
 src/app/pages/schedule/schedule.module.ts     |  4 +-
 .../pages/session-detail/session-detail.html  |  4 +-
 .../session-detail/session-detail.module.ts   |  4 +-
 .../session-types/session-types.module.ts     |  4 +-
 .../session-types/session-types.page.html     |  4 +-
 .../pages/social-media/social-media.module.ts |  4 +-
 .../pages/social-media/social-media.page.html |  4 +-
 src/app/pages/speaker-list/speaker-list.html  |  4 +-
 .../pages/speaker-list/speaker-list.module.ts |  4 +-
 .../pages/sponsor-detail/sponsor-detail.html  |  4 +-
 .../sponsor-detail/sponsor-detail.module.ts   |  2 +
 src/app/pages/sponsors/sponsors.module.ts     |  4 +-
 src/app/pages/sponsors/sponsors.page.html     |  4 +-
 src/app/pages/sprints/sprints.module.ts       |  4 +-
 src/app/pages/sprints/sprints.page.html       |  4 +-
 .../pages/venues-hours/venues-hours.module.ts |  4 +-
 .../pages/venues-hours/venues-hours.page.html |  4 +-
 src/app/pages/wifi/wifi.module.ts             |  4 +-
 src/app/pages/wifi/wifi.page.html             |  4 +-
 .../scroll-to-top.component.html              |  5 +++
 .../scroll-to-top.component.scss              | 17 ++++++++
 .../scroll-to-top/scroll-to-top.component.ts  | 40 +++++++++++++++++++
 src/app/scroll-to-top/scroll-to-top.module.ts | 12 ++++++
 48 files changed, 201 insertions(+), 43 deletions(-)
 create mode 100644 src/app/scroll-to-top/scroll-to-top.component.html
 create mode 100644 src/app/scroll-to-top/scroll-to-top.component.scss
 create mode 100644 src/app/scroll-to-top/scroll-to-top.component.ts
 create mode 100644 src/app/scroll-to-top/scroll-to-top.module.ts

diff --git a/src/app/pages/about-psf/about-psf.module.ts b/src/app/pages/about-psf/about-psf.module.ts
index ec2e6aa4..ec83b582 100644
--- a/src/app/pages/about-psf/about-psf.module.ts
+++ b/src/app/pages/about-psf/about-psf.module.ts
@@ -7,13 +7,15 @@ import { IonicModule } from '@ionic/angular';
 import { AboutPsfPageRoutingModule } from './about-psf-routing.module';
 
 import { AboutPsfPage } from './about-psf.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    AboutPsfPageRoutingModule
+    AboutPsfPageRoutingModule,
+    ScrollToTopModule
   ],
   declarations: [AboutPsfPage]
 })
diff --git a/src/app/pages/about-psf/about-psf.page.html b/src/app/pages/about-psf/about-psf.page.html
index 9e0cf58b..a892d175 100644
--- a/src/app/pages/about-psf/about-psf.page.html
+++ b/src/app/pages/about-psf/about-psf.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="page-hero">
     <ion-icon name="logo-python" class="page-hero-icon"></ion-icon>
     <h1>Python Software Foundation</h1>
@@ -212,4 +212,6 @@ <h2>Python Software Foundation</h2>
   </ion-row>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/about-pycon/about-pycon.module.ts b/src/app/pages/about-pycon/about-pycon.module.ts
index 1f9ddef7..d5dfc872 100644
--- a/src/app/pages/about-pycon/about-pycon.module.ts
+++ b/src/app/pages/about-pycon/about-pycon.module.ts
@@ -7,13 +7,15 @@ import { IonicModule } from '@ionic/angular';
 import { AboutPyconPageRoutingModule } from './about-pycon-routing.module';
 
 import { AboutPyconPage } from './about-pycon.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    AboutPyconPageRoutingModule
+    AboutPyconPageRoutingModule,
+    ScrollToTopModule
   ],
   declarations: [AboutPyconPage]
 })
diff --git a/src/app/pages/about-pycon/about-pycon.page.html b/src/app/pages/about-pycon/about-pycon.page.html
index 2c87bd87..7f68235d 100644
--- a/src/app/pages/about-pycon/about-pycon.page.html
+++ b/src/app/pages/about-pycon/about-pycon.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="about-hero">
     <ion-icon name="information-circle" class="about-hero-icon"></ion-icon>
     <h1>PyCon US 2026</h1>
@@ -55,4 +55,6 @@ <h1>PyCon US 2026</h1>
   </ion-accordion-group>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/account/account.html b/src/app/pages/account/account.html
index b803d94a..a67f00be 100644
--- a/src/app/pages/account/account.html
+++ b/src/app/pages/account/account.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div *ngIf="loggedIn" class="account-hero">
     <ion-icon name="person-circle" class="account-hero-icon"></ion-icon>
     <h1>{{ nickname || email || 'Account' }}</h1>
@@ -47,4 +47,6 @@ <h2>Website Issue</h2>
   </ion-list>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/account/account.module.ts b/src/app/pages/account/account.module.ts
index da13bb87..9451e55b 100644
--- a/src/app/pages/account/account.module.ts
+++ b/src/app/pages/account/account.module.ts
@@ -4,12 +4,14 @@ import { IonicModule } from '@ionic/angular';
 
 import { AccountPage } from './account';
 import { AccountPageRoutingModule } from './account-routing.module';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
     CommonModule,
     IonicModule,
-    AccountPageRoutingModule
+    AccountPageRoutingModule,
+    ScrollToTopModule
   ],
   declarations: [
     AccountPage,
diff --git a/src/app/pages/coc/coc.module.ts b/src/app/pages/coc/coc.module.ts
index 72781722..782d32bd 100644
--- a/src/app/pages/coc/coc.module.ts
+++ b/src/app/pages/coc/coc.module.ts
@@ -4,12 +4,14 @@ import { IonicModule } from '@ionic/angular';
 
 import { CocPageRoutingModule } from './coc-routing.module';
 import { CocPage } from './coc.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
     CommonModule,
     IonicModule,
-    CocPageRoutingModule
+    CocPageRoutingModule,
+    ScrollToTopModule
   ],
   declarations: [CocPage]
 })
diff --git a/src/app/pages/coc/coc.page.html b/src/app/pages/coc/coc.page.html
index 81b6721a..c71997eb 100644
--- a/src/app/pages/coc/coc.page.html
+++ b/src/app/pages/coc/coc.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="coc-hero">
     <div class="coc-hero-title">
       <ion-icon name="shield-checkmark" class="coc-hero-icon"></ion-icon>
@@ -74,4 +74,6 @@ <h2>Help & Safety</h2>
   </div>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/help/help.module.ts b/src/app/pages/help/help.module.ts
index c982ee9e..3897e9e2 100644
--- a/src/app/pages/help/help.module.ts
+++ b/src/app/pages/help/help.module.ts
@@ -6,13 +6,15 @@ import { LocationMapModule } from '../../location-map/location-map.module';
 
 import { HelpPageRoutingModule } from './help-routing.module';
 import { HelpPage } from './help.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
     CommonModule,
     IonicModule,
     LocationMapModule,
-    HelpPageRoutingModule
+    HelpPageRoutingModule,
+    ScrollToTopModule
   ],
   declarations: [HelpPage]
 })
diff --git a/src/app/pages/help/help.page.html b/src/app/pages/help/help.page.html
index 7f87dd6a..408216cf 100644
--- a/src/app/pages/help/help.page.html
+++ b/src/app/pages/help/help.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="page-hero">
     <ion-icon name="help-buoy" class="page-hero-icon"></ion-icon>
     <h1>Help & Safety</h1>
@@ -93,4 +93,6 @@ <h2>Report a Website Issue</h2>
   </ion-list>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/job-listings/job-listings.module.ts b/src/app/pages/job-listings/job-listings.module.ts
index 39c62649..464d16cc 100644
--- a/src/app/pages/job-listings/job-listings.module.ts
+++ b/src/app/pages/job-listings/job-listings.module.ts
@@ -8,6 +8,7 @@ import { JobListingsPageRoutingModule } from './job-listings-routing.module';
 
 import { JobListingsPage } from './job-listings.page';
 import { FloorPlanModalModule } from '../../floor-plan-modal/floor-plan-modal.module';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
@@ -15,7 +16,8 @@ import { FloorPlanModalModule } from '../../floor-plan-modal/floor-plan-modal.mo
     FormsModule,
     IonicModule,
     JobListingsPageRoutingModule,
-    FloorPlanModalModule
+    FloorPlanModalModule,
+    ScrollToTopModule
   ],
   declarations: [JobListingsPage]
 })
diff --git a/src/app/pages/job-listings/job-listings.page.html b/src/app/pages/job-listings/job-listings.page.html
index eb331dbe..f60d6dba 100644
--- a/src/app/pages/job-listings/job-listings.page.html
+++ b/src/app/pages/job-listings/job-listings.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
@@ -59,4 +59,6 @@ <h2 class="sponsor-name">{{listing.sponsor_name}}</h2>
   </div>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/keynote-speakers/keynote-speakers.module.ts b/src/app/pages/keynote-speakers/keynote-speakers.module.ts
index f103fe72..123704e0 100644
--- a/src/app/pages/keynote-speakers/keynote-speakers.module.ts
+++ b/src/app/pages/keynote-speakers/keynote-speakers.module.ts
@@ -3,9 +3,10 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { KeynoteSpeakersPageRoutingModule } from './keynote-speakers-routing.module';
 import { KeynoteSpeakersPage } from './keynote-speakers.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
-  imports: [CommonModule, IonicModule, KeynoteSpeakersPageRoutingModule],
+  imports: [CommonModule, IonicModule, KeynoteSpeakersPageRoutingModule, ScrollToTopModule],
   declarations: [KeynoteSpeakersPage]
 })
 export class KeynoteSpeakersPageModule {}
diff --git a/src/app/pages/keynote-speakers/keynote-speakers.page.html b/src/app/pages/keynote-speakers/keynote-speakers.page.html
index 299af666..580f8f92 100644
--- a/src/app/pages/keynote-speakers/keynote-speakers.page.html
+++ b/src/app/pages/keynote-speakers/keynote-speakers.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="ks-hero">
     <ion-icon name="star" class="ks-hero-icon"></ion-icon>
     <h1>Keynote Speakers</h1>
@@ -47,4 +47,6 @@ <h2>{{ steeringCouncil.name }}</h2>
   </ion-card>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/lightning-talks/lightning-talks.module.ts b/src/app/pages/lightning-talks/lightning-talks.module.ts
index 05bc866f..a57dd597 100644
--- a/src/app/pages/lightning-talks/lightning-talks.module.ts
+++ b/src/app/pages/lightning-talks/lightning-talks.module.ts
@@ -3,9 +3,10 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { LightningTalksPageRoutingModule } from './lightning-talks-routing.module';
 import { LightningTalksPage } from './lightning-talks.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
-  imports: [CommonModule, IonicModule, LightningTalksPageRoutingModule],
+  imports: [CommonModule, IonicModule, LightningTalksPageRoutingModule, ScrollToTopModule],
   declarations: [LightningTalksPage]
 })
 export class LightningTalksPageModule {}
diff --git a/src/app/pages/lightning-talks/lightning-talks.page.html b/src/app/pages/lightning-talks/lightning-talks.page.html
index 2982bf9d..8af06034 100644
--- a/src/app/pages/lightning-talks/lightning-talks.page.html
+++ b/src/app/pages/lightning-talks/lightning-talks.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="lt-hero">
     <ion-icon name="flash" class="lt-hero-icon"></ion-icon>
     <h1>Lightning Talks</h1>
@@ -92,4 +92,6 @@ <h2>Lightning Talks on pycon.org</h2>
   </ion-list>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/now/now.module.ts b/src/app/pages/now/now.module.ts
index 750143c9..be24fade 100644
--- a/src/app/pages/now/now.module.ts
+++ b/src/app/pages/now/now.module.ts
@@ -8,6 +8,7 @@ import { NowPageRoutingModule } from './now-routing.module';
 import { PipesModule } from '../../pipes/pipes.module';
 
 import { NowPage } from './now.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
@@ -15,7 +16,8 @@ import { NowPage } from './now.page';
     FormsModule,
     IonicModule,
     NowPageRoutingModule,
-    PipesModule
+    PipesModule,
+    ScrollToTopModule
   ],
   declarations: [NowPage]
 })
diff --git a/src/app/pages/now/now.page.html b/src/app/pages/now/now.page.html
index c6f1fb5a..f38976d3 100644
--- a/src/app/pages/now/now.page.html
+++ b/src/app/pages/now/now.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <ion-refresher slot="fixed" (ionRefresh)="refresh(); $event.target.complete()">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
@@ -77,4 +77,6 @@ <h3>{{session.name}}</h3>
       </ion-list>
     </div>
   </div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/room-detail/room-detail.module.ts b/src/app/pages/room-detail/room-detail.module.ts
index 36591323..34deffae 100644
--- a/src/app/pages/room-detail/room-detail.module.ts
+++ b/src/app/pages/room-detail/room-detail.module.ts
@@ -4,9 +4,10 @@ import { IonicModule } from '@ionic/angular';
 import { LocationMapModule } from '../../location-map/location-map.module';
 import { RoomDetailPageRoutingModule } from './room-detail-routing.module';
 import { RoomDetailPage } from './room-detail.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
-  imports: [CommonModule, IonicModule, LocationMapModule, RoomDetailPageRoutingModule],
+  imports: [CommonModule, IonicModule, LocationMapModule, RoomDetailPageRoutingModule, ScrollToTopModule],
   declarations: [RoomDetailPage],
 })
 export class RoomDetailPageModule {}
diff --git a/src/app/pages/room-detail/room-detail.page.html b/src/app/pages/room-detail/room-detail.page.html
index c7ab0750..4af14bd6 100644
--- a/src/app/pages/room-detail/room-detail.page.html
+++ b/src/app/pages/room-detail/room-detail.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div *ngIf="loaded && !room" class="empty-state">
     <ion-icon name="alert-circle-outline"></ion-icon>
     <p>Room not found.</p>
@@ -61,4 +61,6 @@ <h3>{{ session.name }}</h3>
   </div>
 
   <div style="height: 60px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/rooms/rooms.module.ts b/src/app/pages/rooms/rooms.module.ts
index ddcd3c1a..bd0334ca 100644
--- a/src/app/pages/rooms/rooms.module.ts
+++ b/src/app/pages/rooms/rooms.module.ts
@@ -3,9 +3,10 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { RoomsPageRoutingModule } from './rooms-routing.module';
 import { RoomsPage } from './rooms.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
-  imports: [CommonModule, IonicModule, RoomsPageRoutingModule],
+  imports: [CommonModule, IonicModule, RoomsPageRoutingModule, ScrollToTopModule],
   declarations: [RoomsPage],
 })
 export class RoomsPageModule {}
diff --git a/src/app/pages/rooms/rooms.page.html b/src/app/pages/rooms/rooms.page.html
index 59b2f96b..364b69cd 100644
--- a/src/app/pages/rooms/rooms.page.html
+++ b/src/app/pages/rooms/rooms.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="page-hero">
     <ion-icon name="map" class="page-hero-icon"></ion-icon>
     <h1>Rooms</h1>
@@ -35,4 +35,6 @@ <h2>{{ room.name }}</h2>
   </ion-list>
 
   <div style="height: 60px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/schedule-list/schedule-list.module.ts b/src/app/pages/schedule-list/schedule-list.module.ts
index a9baf252..11091ca6 100644
--- a/src/app/pages/schedule-list/schedule-list.module.ts
+++ b/src/app/pages/schedule-list/schedule-list.module.ts
@@ -8,6 +8,7 @@ import { ScheduleListPageRoutingModule } from './schedule-list-routing.module';
 
 import { ScheduleListPage } from './schedule-list.page';
 import { PipesModule } from '../../pipes/pipes.module';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
@@ -15,7 +16,8 @@ import { PipesModule } from '../../pipes/pipes.module';
     FormsModule,
     IonicModule,
     ScheduleListPageRoutingModule,
-    PipesModule
+    PipesModule,
+    ScrollToTopModule
   ],
   declarations: [ScheduleListPage]
 })
diff --git a/src/app/pages/schedule-list/schedule-list.page.html b/src/app/pages/schedule-list/schedule-list.page.html
index 6be5096f..e79dea57 100644
--- a/src/app/pages/schedule-list/schedule-list.page.html
+++ b/src/app/pages/schedule-list/schedule-list.page.html
@@ -10,7 +10,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content fullscreen="true" scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent fullscreen="true" scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="page-hero">
     <ion-icon [name]="isOpenSpaceView ? 'chatbubbles' : 'easel'" class="page-hero-icon"></ion-icon>
     <h1>{{trackName | trackName : 'plural'}}</h1>
@@ -130,4 +130,6 @@ <h2 class="session-name">
   <ion-infinite-scroll [disabled]="!scrolling" (ionInfinite)="onIonInfinite($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
   </ion-infinite-scroll>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/schedule/schedule.html b/src/app/pages/schedule/schedule.html
index 54bea26d..3dde6537 100644
--- a/src/app/pages/schedule/schedule.html
+++ b/src/app/pages/schedule/schedule.html
@@ -22,7 +22,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content fullscreen="true">
+<ion-content fullscreen="true" #pageContent scrollEvents="true">
   <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
@@ -145,4 +145,6 @@ <h2 class="error-title">Couldn't load schedule</h2>
     </button>
   </div>
 
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
+
 </ion-content>
diff --git a/src/app/pages/schedule/schedule.module.ts b/src/app/pages/schedule/schedule.module.ts
index 6a3fb456..48083771 100644
--- a/src/app/pages/schedule/schedule.module.ts
+++ b/src/app/pages/schedule/schedule.module.ts
@@ -8,6 +8,7 @@ import { ScheduleFilterPage } from '../schedule-filter/schedule-filter';
 import { SchedulePageRoutingModule } from './schedule-routing.module';
 import { SessionOrderPipe } from '../../pipes/session-order.pipe';
 import { PipesModule } from '../../pipes/pipes.module';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
     imports: [
@@ -15,7 +16,8 @@ import { PipesModule } from '../../pipes/pipes.module';
         FormsModule,
         IonicModule,
         SchedulePageRoutingModule,
-        PipesModule
+        PipesModule,
+        ScrollToTopModule
     ],
     declarations: [
         SchedulePage,
diff --git a/src/app/pages/session-detail/session-detail.html b/src/app/pages/session-detail/session-detail.html
index 3b28ef1f..b91d4a63 100644
--- a/src/app/pages/session-detail/session-detail.html
+++ b/src/app/pages/session-detail/session-detail.html
@@ -15,7 +15,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<ion-content #pageContent scrollEvents="true">
   <div *ngIf="session" class="session-detail-content">
     <div class="session-hero">
       <h1 class="session-title">{{session.name}}</h1>
@@ -117,4 +117,6 @@ <h3>{{poster.title}}</h3>
       </div>
     </div>
   </div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/session-detail/session-detail.module.ts b/src/app/pages/session-detail/session-detail.module.ts
index 1867b9fd..a845f5d2 100644
--- a/src/app/pages/session-detail/session-detail.module.ts
+++ b/src/app/pages/session-detail/session-detail.module.ts
@@ -6,6 +6,7 @@ import { SessionDetailPageRoutingModule } from './session-detail-routing.module'
 import { IonicModule } from '@ionic/angular';
 import { PipesModule } from '../../pipes/pipes.module';
 import { FloorPlanModalModule } from '../../floor-plan-modal/floor-plan-modal.module';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
@@ -13,7 +14,8 @@ import { FloorPlanModalModule } from '../../floor-plan-modal/floor-plan-modal.mo
     IonicModule,
     SessionDetailPageRoutingModule,
     PipesModule,
-    FloorPlanModalModule
+    FloorPlanModalModule,
+    ScrollToTopModule
   ],
   declarations: [
     SessionDetailPage,
diff --git a/src/app/pages/session-types/session-types.module.ts b/src/app/pages/session-types/session-types.module.ts
index f07b88c4..a9cdd33a 100644
--- a/src/app/pages/session-types/session-types.module.ts
+++ b/src/app/pages/session-types/session-types.module.ts
@@ -4,12 +4,14 @@ import { IonicModule } from '@ionic/angular';
 
 import { SessionTypesPageRoutingModule } from './session-types-routing.module';
 import { SessionTypesPage } from './session-types.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
     CommonModule,
     IonicModule,
-    SessionTypesPageRoutingModule
+    SessionTypesPageRoutingModule,
+    ScrollToTopModule
   ],
   declarations: [SessionTypesPage]
 })
diff --git a/src/app/pages/session-types/session-types.page.html b/src/app/pages/session-types/session-types.page.html
index a163e321..ad8505f0 100644
--- a/src/app/pages/session-types/session-types.page.html
+++ b/src/app/pages/session-types/session-types.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="types-hero">
     <div class="types-hero-title">
       <ion-icon name="pricetags" class="types-hero-icon"></ion-icon>
@@ -107,4 +107,6 @@ <h1>Session Types</h1>
   </div>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/social-media/social-media.module.ts b/src/app/pages/social-media/social-media.module.ts
index 0e8f0cd7..ecc3322d 100644
--- a/src/app/pages/social-media/social-media.module.ts
+++ b/src/app/pages/social-media/social-media.module.ts
@@ -7,13 +7,15 @@ import { IonicModule } from '@ionic/angular';
 import { SocialMediaPageRoutingModule } from './social-media-routing.module';
 
 import { SocialMediaPage } from './social-media.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    SocialMediaPageRoutingModule
+    SocialMediaPageRoutingModule,
+    ScrollToTopModule
   ],
   declarations: [SocialMediaPage]
 })
diff --git a/src/app/pages/social-media/social-media.page.html b/src/app/pages/social-media/social-media.page.html
index 8ea90de3..a0eb2d22 100644
--- a/src/app/pages/social-media/social-media.page.html
+++ b/src/app/pages/social-media/social-media.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="page-hero">
     <ion-icon name="share-social" class="page-hero-icon"></ion-icon>
     <h1>Social Media</h1>
@@ -140,4 +140,6 @@ <h2>PyPI Blog</h2>
   </ion-list>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/speaker-list/speaker-list.html b/src/app/pages/speaker-list/speaker-list.html
index 3f57f987..406b20f7 100644
--- a/src/app/pages/speaker-list/speaker-list.html
+++ b/src/app/pages/speaker-list/speaker-list.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content fullscreen="true" scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent fullscreen="true" scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="page-hero">
     <ion-icon name="people" class="page-hero-icon"></ion-icon>
     <h1>Speakers</h1>
@@ -37,4 +37,6 @@ <h2>{{speaker.name}}</h2>
   <ion-infinite-scroll [disabled]="!scrolling" (ionInfinite)="onIonInfinite($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
   </ion-infinite-scroll>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/speaker-list/speaker-list.module.ts b/src/app/pages/speaker-list/speaker-list.module.ts
index 78b7e803..cd3ea257 100644
--- a/src/app/pages/speaker-list/speaker-list.module.ts
+++ b/src/app/pages/speaker-list/speaker-list.module.ts
@@ -6,6 +6,7 @@ import { FormsModule } from '@angular/forms';
 import { SpeakerListPage } from './speaker-list';
 import { SpeakerListPageRoutingModule } from './speaker-list-routing.module';
 import { PipesModule } from '../../pipes/pipes.module';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
@@ -13,7 +14,8 @@ import { PipesModule } from '../../pipes/pipes.module';
     FormsModule,
     IonicModule,
     SpeakerListPageRoutingModule,
-    PipesModule
+    PipesModule,
+    ScrollToTopModule
   ],
   declarations: [SpeakerListPage],
 })
diff --git a/src/app/pages/sponsor-detail/sponsor-detail.html b/src/app/pages/sponsor-detail/sponsor-detail.html
index 32222baf..14711f17 100644
--- a/src/app/pages/sponsor-detail/sponsor-detail.html
+++ b/src/app/pages/sponsor-detail/sponsor-detail.html
@@ -6,7 +6,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="sponsor-detail">
+<ion-content #pageContent scrollEvents="true" class="sponsor-detail">
   <div class="sponsor-hero">
     <div class="sponsor-logo-container">
       <img *ngIf="sponsor?.logo_url" class="sponsor-logo" [src]="sponsor?.logo_url" [alt]="sponsor?.name + ' logo'" />
@@ -57,4 +57,6 @@ <h1>{{ sponsor?.name }}</h1>
   </ion-card>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/sponsor-detail/sponsor-detail.module.ts b/src/app/pages/sponsor-detail/sponsor-detail.module.ts
index 59e2d214..49e243c4 100644
--- a/src/app/pages/sponsor-detail/sponsor-detail.module.ts
+++ b/src/app/pages/sponsor-detail/sponsor-detail.module.ts
@@ -4,12 +4,14 @@ import { CommonModule } from '@angular/common';
 import { SponsorDetailPage } from './sponsor-detail';
 import { SponsorDetailPageRoutingModule } from './sponsor-detail-routing.module';
 import { IonicModule } from '@ionic/angular';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
     CommonModule,
     IonicModule,
     SponsorDetailPageRoutingModule,
+    ScrollToTopModule,
   ],
   declarations: [
     SponsorDetailPage,
diff --git a/src/app/pages/sponsors/sponsors.module.ts b/src/app/pages/sponsors/sponsors.module.ts
index 3975bc7d..6668a2bc 100644
--- a/src/app/pages/sponsors/sponsors.module.ts
+++ b/src/app/pages/sponsors/sponsors.module.ts
@@ -7,13 +7,15 @@ import { IonicModule } from '@ionic/angular';
 import { SponsorsPageRoutingModule } from './sponsors-routing.module';
 
 import { SponsorsPage } from './sponsors.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    SponsorsPageRoutingModule
+    SponsorsPageRoutingModule,
+    ScrollToTopModule
   ],
   declarations: [SponsorsPage]
 })
diff --git a/src/app/pages/sponsors/sponsors.page.html b/src/app/pages/sponsors/sponsors.page.html
index c8546d66..d93458b7 100644
--- a/src/app/pages/sponsors/sponsors.page.html
+++ b/src/app/pages/sponsors/sponsors.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="sponsors-hero">
     <ion-icon name="heart" class="sponsors-hero-icon"></ion-icon>
     <h1>Our Sponsors</h1>
@@ -35,4 +35,6 @@ <h2>{{ sponsor.name }}</h2>
   </ion-list>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/sprints/sprints.module.ts b/src/app/pages/sprints/sprints.module.ts
index 1750b783..fa591a5d 100644
--- a/src/app/pages/sprints/sprints.module.ts
+++ b/src/app/pages/sprints/sprints.module.ts
@@ -7,13 +7,15 @@ import { IonicModule } from '@ionic/angular';
 import { SprintsPageRoutingModule } from './sprints-routing.module';
 
 import { SprintsPage } from './sprints.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    SprintsPageRoutingModule
+    SprintsPageRoutingModule,
+    ScrollToTopModule
   ],
   declarations: [SprintsPage]
 })
diff --git a/src/app/pages/sprints/sprints.page.html b/src/app/pages/sprints/sprints.page.html
index f89d407f..a4574dc2 100644
--- a/src/app/pages/sprints/sprints.page.html
+++ b/src/app/pages/sprints/sprints.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
@@ -85,4 +85,6 @@ <h1>Development Sprints</h1>
       <br><br><br><br>
     </ion-row>
   </ion-grid>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/venues-hours/venues-hours.module.ts b/src/app/pages/venues-hours/venues-hours.module.ts
index bb934ebd..bda88d94 100644
--- a/src/app/pages/venues-hours/venues-hours.module.ts
+++ b/src/app/pages/venues-hours/venues-hours.module.ts
@@ -6,13 +6,15 @@ import { LocationMapModule } from '../../location-map/location-map.module';
 
 import { VenuesHoursPageRoutingModule } from './venues-hours-routing.module';
 import { VenuesHoursPage } from './venues-hours.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
     CommonModule,
     IonicModule,
     LocationMapModule,
-    VenuesHoursPageRoutingModule
+    VenuesHoursPageRoutingModule,
+    ScrollToTopModule
   ],
   declarations: [VenuesHoursPage]
 })
diff --git a/src/app/pages/venues-hours/venues-hours.page.html b/src/app/pages/venues-hours/venues-hours.page.html
index cd718d07..7902b702 100644
--- a/src/app/pages/venues-hours/venues-hours.page.html
+++ b/src/app/pages/venues-hours/venues-hours.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="venues-hero">
     <div class="venues-hero-title">
       <ion-icon name="location" class="venues-hero-icon"></ion-icon>
@@ -65,4 +65,6 @@ <h2>Conference Maps</h2>
   </ion-list>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/pages/wifi/wifi.module.ts b/src/app/pages/wifi/wifi.module.ts
index 06a289b0..9743915d 100644
--- a/src/app/pages/wifi/wifi.module.ts
+++ b/src/app/pages/wifi/wifi.module.ts
@@ -4,12 +4,14 @@ import { IonicModule } from '@ionic/angular';
 
 import { WifiPageRoutingModule } from './wifi-routing.module';
 import { WifiPage } from './wifi.page';
+import { ScrollToTopModule } from '../../scroll-to-top/scroll-to-top.module';
 
 @NgModule({
   imports: [
     CommonModule,
     IonicModule,
-    WifiPageRoutingModule
+    WifiPageRoutingModule,
+    ScrollToTopModule
   ],
   declarations: [WifiPage]
 })
diff --git a/src/app/pages/wifi/wifi.page.html b/src/app/pages/wifi/wifi.page.html
index 8f41e2ee..45e9b3f8 100644
--- a/src/app/pages/wifi/wifi.page.html
+++ b/src/app/pages/wifi/wifi.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+<ion-content #pageContent scrollEvents="true" (ionScroll)="onScroll($event)">
   <div class="wifi-hero">
     <ion-icon name="wifi" class="wifi-hero-icon"></ion-icon>
     <h1>Connect to Wi-Fi</h1>
@@ -62,4 +62,6 @@ <h1>Connect to Wi-Fi</h1>
   </div>
 
   <div style="height: 80px"></div>
+
+  <app-scroll-to-top [content]="pageContent"></app-scroll-to-top>
 </ion-content>
diff --git a/src/app/scroll-to-top/scroll-to-top.component.html b/src/app/scroll-to-top/scroll-to-top.component.html
new file mode 100644
index 00000000..7eb5fb6f
--- /dev/null
+++ b/src/app/scroll-to-top/scroll-to-top.component.html
@@ -0,0 +1,5 @@
+<ion-fab vertical="bottom" horizontal="end" *ngIf="visible" class="scroll-to-top-fab">
+  <ion-fab-button size="small" (click)="scrollToTop()" aria-label="Scroll to top">
+    <ion-icon name="chevron-up-outline"></ion-icon>
+  </ion-fab-button>
+</ion-fab>
diff --git a/src/app/scroll-to-top/scroll-to-top.component.scss b/src/app/scroll-to-top/scroll-to-top.component.scss
new file mode 100644
index 00000000..f40522da
--- /dev/null
+++ b/src/app/scroll-to-top/scroll-to-top.component.scss
@@ -0,0 +1,17 @@
+:host {
+  pointer-events: none;
+}
+
+.scroll-to-top-fab {
+  pointer-events: auto;
+  // Bump up so it doesn't sit under the bottom 80px spacer used by long pages.
+  margin-bottom: 80px;
+
+  ion-fab-button {
+    // PyCon pink — same as the location-pin hero icon on Venue & Hours.
+    --background: #DD04D2;
+    --background-activated: #B8038F;
+    --color: #ffffff;
+    --box-shadow: 0 4px 12px rgba(221, 4, 210, 0.35);
+  }
+}
diff --git a/src/app/scroll-to-top/scroll-to-top.component.ts b/src/app/scroll-to-top/scroll-to-top.component.ts
new file mode 100644
index 00000000..58239382
--- /dev/null
+++ b/src/app/scroll-to-top/scroll-to-top.component.ts
@@ -0,0 +1,40 @@
+import { Component, Input, OnDestroy, AfterViewInit } from '@angular/core';
+import { IonContent } from '@ionic/angular';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-scroll-to-top',
+  templateUrl: './scroll-to-top.component.html',
+  styleUrls: ['./scroll-to-top.component.scss'],
+  // ion-content's slot="fixed" only honors DIRECT children. The inner
+  // ion-fab is two levels deep (app-scroll-to-top > ion-fab), so put the
+  // slot on the host element so Ionic anchors the whole component.
+  host: { slot: 'fixed' },
+})
+export class ScrollToTopComponent implements AfterViewInit, OnDestroy {
+  @Input() content?: IonContent;
+  @Input() threshold = 400;
+  @Input() duration = 300;
+
+  visible = false;
+
+  private scrollSub?: Subscription;
+
+  ngAfterViewInit(): void {
+    if (!this.content) {
+      return;
+    }
+    this.scrollSub = this.content.ionScroll.subscribe((ev: CustomEvent) => {
+      const scrollTop = ev?.detail?.scrollTop ?? 0;
+      this.visible = scrollTop > this.threshold;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.scrollSub?.unsubscribe();
+  }
+
+  scrollToTop(): void {
+    this.content?.scrollToTop(this.duration);
+  }
+}
diff --git a/src/app/scroll-to-top/scroll-to-top.module.ts b/src/app/scroll-to-top/scroll-to-top.module.ts
new file mode 100644
index 00000000..083d4ec3
--- /dev/null
+++ b/src/app/scroll-to-top/scroll-to-top.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+
+import { ScrollToTopComponent } from './scroll-to-top.component';
+
+@NgModule({
+  imports: [CommonModule, IonicModule],
+  declarations: [ScrollToTopComponent],
+  exports: [ScrollToTopComponent],
+})
+export class ScrollToTopModule {}