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

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]
 })

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>

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]
 })

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>

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>

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,

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]
 })

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>

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]
 })

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>

src/app/pages/job-listings/job-listings.module.ts

@@ -8,14 +8,16 @@ 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: [
     CommonModule,
     FormsModule,
     IonicModule,
     JobListingsPageRoutingModule,
-    FloorPlanModalModule
+    FloorPlanModalModule,
+    ScrollToTopModule
   ],
   declarations: [JobListingsPage]
 })

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>

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 {}

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>

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 {}

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>

src/app/pages/now/now.module.ts

@@ -8,14 +8,16 @@ 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: [
     CommonModule,
     FormsModule,
     IonicModule,
     NowPageRoutingModule,
-    PipesModule
+    PipesModule,
+    ScrollToTopModule
   ],
   declarations: [NowPage]
 })

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>

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 {}

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>

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 {}

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>

src/app/pages/schedule-list/schedule-list.module.ts

@@ -8,14 +8,16 @@ 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: [
     CommonModule,
     FormsModule,
     IonicModule,
     ScheduleListPageRoutingModule,
-    PipesModule
+    PipesModule,
+    ScrollToTopModule
   ],
   declarations: [ScheduleListPage]
 })

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>

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>