fix(scroll): scroll to top after navigation end

src/app/core/components/root/root.component.html

@@ -2,7 +2,7 @@
   <div class="layout-desktop">
     <osf-sidenav></osf-sidenav>
 
-    <div class="content-wrapper">
+    <div class="content-wrapper" osfScrollTopOnRouteChange>
       <osf-maintenance-banner></osf-maintenance-banner>
       <osf-header></osf-header>
 
@@ -13,7 +13,7 @@
   </div>
 } @else {
   <div class="layout-tablet">
-    <div class="content-wrapper">
+    <div class="content-wrapper" osfScrollTopOnRouteChange>
       <osf-maintenance-banner></osf-maintenance-banner>
       <osf-topnav></osf-topnav>
 

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'],

src/app/shared/directives/index.ts

@@ -1 +1,2 @@
+export { ScrollTopOnRouteChangeDirective } from './scroll-top.directive';
 export { StopPropagationDirective } from './stop-propagation.directive';

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',
+        });
+      });
+  }
+}