diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index c34673c07..59787f63b 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -37,7 +37,7 @@ const routes: Routes = [
@NgModule({
imports: [RouterModule.forRoot(routes, {
// preloadingStrategy: PreloadAllModules,
- scrollPositionRestoration: 'top',
+ // scrollPositionRestoration: 'top',
onSameUrlNavigation: 'reload',
// relativeLinkResolution: 'corrected'
})],
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 367f68549..8d8bec55b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
-import {Router} from '@angular/router';
+import { Router } from '@angular/router';
+import { SmoothScroll } from './services/smooth-scroll';
@Component({
selector: 'app-root',
@@ -9,7 +10,7 @@ import {Router} from '@angular/router';
export class AppComponent {
title = 'open-science-observatory-ui';
- constructor(private router: Router) {
+ constructor(private router: Router, private smoothScroll: SmoothScroll) {
}
isEmbedRoute() {
diff --git a/src/app/pages/methodology/methodology.component.ts b/src/app/pages/methodology/methodology.component.ts
index 66afb2d06..a7da9d431 100644
--- a/src/app/pages/methodology/methodology.component.ts
+++ b/src/app/pages/methodology/methodology.component.ts
@@ -1,6 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs';
+import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-methodology',
@@ -9,35 +7,5 @@ import { Subscription } from 'rxjs';
encapsulation: ViewEncapsulation.None
})
-export class MethodologyPageComponent implements OnInit, OnDestroy {
-
- private subscriptions: any[] = [];
-
- constructor(private route: ActivatedRoute) {
- }
-
- ngOnInit(): void {
- this.subscriptions.push(this.route.fragment.subscribe(fragment => {
- setTimeout(() => {
- this.goTo(fragment);
- }, 100);
- }));
- }
-
- goTo(id: string) {
- const yOffset = -100;
- const element = document.getElementById(id);
- if (element) {
- const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
- window.scrollTo({top: y, behavior: 'smooth'});
- }
- }
-
- ngOnDestroy(): void {
- this.subscriptions.forEach(subscription => {
- if (subscription instanceof Subscription) {
- subscription.unsubscribe();
- }
- });
- }
+export class MethodologyPageComponent {
}
diff --git a/src/app/services/smooth-scroll.ts b/src/app/services/smooth-scroll.ts
new file mode 100644
index 000000000..d4d841258
--- /dev/null
+++ b/src/app/services/smooth-scroll.ts
@@ -0,0 +1,69 @@
+import {NavigationEnd, Router} from '@angular/router';
+import {Injectable} from '@angular/core';
+import {Subscription} from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class SmoothScroll {
+ private interval;
+ private readonly sub;
+ private lastRoute;
+
+ constructor(private router: Router) {
+ this.sub = router.events.subscribe(event => {
+ if (event instanceof NavigationEnd) {
+ if(this.interval) {
+ clearInterval(this.interval);
+ }
+ const fragment = router.parseUrl(router.url).fragment;
+ if (fragment) {
+ let i = 0;
+ this.interval = setInterval(() => {
+ i++;
+ const element = document.getElementById(fragment);
+ if (element) {
+ if(this.interval) {
+ clearInterval(this.interval);
+ }
+ const yOffset = -100;
+ let position = 0;
+ let interval = setInterval(() => {
+ if(position !== element.getBoundingClientRect().top) {
+ position = element.getBoundingClientRect().top;
+ } else {
+ clearInterval(interval);
+ const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+ window.scrollTo({top: y, behavior: 'smooth'});
+ }
+ }, 50);
+ }
+ if(i > 4 && this.interval) {
+ clearInterval(this.interval);
+ }
+ }, 100);
+ } else {
+ if(this.lastRoute !== this.getUrl(event.url)) {
+ window.scrollTo({top: 0});
+ } else {
+ window.scrollTo({top: 0, behavior: "smooth"});
+ }
+ }
+ this.lastRoute = this.getUrl(event.url);
+ }
+ });
+ }
+
+ private getUrl(url: string) {
+ return url.split('?')[0].split('#')[0];
+ }
+
+ public clearSubscriptions() {
+ if(this.sub && this.sub instanceof Subscription) {
+ this.sub.unsubscribe();
+ }
+ if(this.interval) {
+ clearInterval(this.interval);
+ }
+ }
+}
diff --git a/src/index.html b/src/index.html
index ef9ec8451..bde58b200 100644
--- a/src/index.html
+++ b/src/index.html
@@ -22,6 +22,7 @@
+