+
diff --git a/src/app/core/components/root/root.component.ts b/src/app/core/components/root/root.component.ts
index ed451f7ec..7f7888e51 100644
--- a/src/app/core/components/root/root.component.ts
+++ b/src/app/core/components/root/root.component.ts
@@ -7,6 +7,7 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { RouterOutlet } from '@angular/router';
+import { ScrollTopOnRouteChangeDirective } from '@osf/shared/directives';
import { IS_MEDIUM, IS_WEB } from '@osf/shared/helpers';
import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
@@ -29,6 +30,7 @@ import { TopnavComponent } from '../topnav/topnav.component';
SidenavComponent,
MaintenanceBannerComponent,
TranslatePipe,
+ ScrollTopOnRouteChangeDirective,
],
templateUrl: './root.component.html',
styleUrls: ['./root.component.scss'],
diff --git a/src/app/shared/directives/index.ts b/src/app/shared/directives/index.ts
index ceb698569..bf072416e 100644
--- a/src/app/shared/directives/index.ts
+++ b/src/app/shared/directives/index.ts
@@ -1 +1,2 @@
+export { ScrollTopOnRouteChangeDirective } from './scroll-top.directive';
export { StopPropagationDirective } from './stop-propagation.directive';
diff --git a/src/app/shared/directives/scroll-top.directive.ts b/src/app/shared/directives/scroll-top.directive.ts
new file mode 100644
index 000000000..09fd04e36
--- /dev/null
+++ b/src/app/shared/directives/scroll-top.directive.ts
@@ -0,0 +1,27 @@
+import { filter } from 'rxjs';
+
+import { Directive, ElementRef, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router } from '@angular/router';
+
+@Directive({
+ selector: '[osfScrollTopOnRouteChange]',
+})
+export class ScrollTopOnRouteChangeDirective {
+ private el = inject(ElementRef);
+ private router = inject(Router);
+
+ constructor() {
+ this.router.events
+ .pipe(
+ filter((e) => e instanceof NavigationEnd),
+ takeUntilDestroyed()
+ )
+ .subscribe(() => {
+ (this.el.nativeElement as HTMLElement).scrollTo({
+ top: 0,
+ behavior: 'instant',
+ });
+ });
+ }
+}