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 @@
-
+
@@ -13,7 +13,7 @@
} @else {
-
+
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', + }); + }); + } +}