From 77e1ea9f6cfac1193491044125f1020f34ae7f76 Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Mon, 15 Sep 2025 12:27:41 +0300
Subject: [PATCH 1/2] fix(scroll): scroll to top after navigation end

---
 .../core/components/root/root.component.html  |  4 +--
 .../core/components/root/root.component.ts    |  2 ++
 .../shared/directives/scroll-top.directive.ts | 27 +++++++++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/app/shared/directives/scroll-top.directive.ts

diff --git a/src/app/core/components/root/root.component.html b/src/app/core/components/root/root.component.html
index 14f0f1997..cfcc6394a 100644
--- a/src/app/core/components/root/root.component.html
+++ b/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>
 
diff --git a/src/app/core/components/root/root.component.ts b/src/app/core/components/root/root.component.ts
index ed451f7ec..40c2abdce 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/scroll-top.directive';
 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/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',
+        });
+      });
+  }
+}

From 54dbdf162417f2e8103cb0db749248ae07bc6f9c Mon Sep 17 00:00:00 2001
From: NazarMykhalkevych <nmykhalkevych@exoft.net>
Date: Mon, 15 Sep 2025 12:35:29 +0300
Subject: [PATCH 2/2] fix(scroll): scroll to top after navigation end

---
 src/app/core/components/root/root.component.ts | 2 +-
 src/app/shared/directives/index.ts             | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/core/components/root/root.component.ts b/src/app/core/components/root/root.component.ts
index 40c2abdce..7f7888e51 100644
--- a/src/app/core/components/root/root.component.ts
+++ b/src/app/core/components/root/root.component.ts
@@ -7,7 +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/scroll-top.directive';
+import { ScrollTopOnRouteChangeDirective } from '@osf/shared/directives';
 import { IS_MEDIUM, IS_WEB } from '@osf/shared/helpers';
 
 import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
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';