Fix scrolling with hash in url

4 files changed, 22 insertions, 3 deletions

diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index e1809d7b7..15841be74 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -35,6 +35,8 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
 
   serverConfig: ServerConfig
 
+  private lastScrollHash: string
+
   constructor (
     private viewportScroller: ViewportScroller,
     private route: ActivatedRoute,
@@ -74,7 +76,11 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
   }
 
   ngAfterViewChecked () {
-    if (window.location.hash) this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
+    if (window.location.hash && window.location.hash !== this.lastScrollHash) {
+      this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
+
+      this.lastScrollHash = window.location.hash
+    }
   }
 
   openContactModal () {
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.ts b/client/src/app/+about/about-peertube/about-peertube.component.ts
index 98c5f93c3..b175a41bc 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.ts
+++ b/client/src/app/+about/about-peertube/about-peertube.component.ts
@@ -8,11 +8,17 @@ import { ViewportScroller } from '@angular/common'
 })
 
 export class AboutPeertubeComponent implements AfterViewChecked {
+  private lastScrollHash: string
+
   constructor (
     private viewportScroller: ViewportScroller
   ) {}
 
   ngAfterViewChecked () {
-    if (window.location.hash) this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
+    if (window.location.hash && window.location.hash !== this.lastScrollHash) {
+      this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
+
+      this.lastScrollHash = window.location.hash
+    }
   }
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
index 5f2db9854..f73f3aa1e 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
@@ -23,6 +23,8 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
   userVideoQuotaUsedDaily = 0
   userVideoQuotaDailyPercentage = 15
 
+  private lastScrollHash: string
+
   constructor (
     private viewportScroller: ViewportScroller,
     private userService: UserService,
@@ -64,7 +66,11 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
   }
 
   ngAfterViewChecked () {
-    if (window.location.hash) this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
+    if (window.location.hash && window.location.hash !== this.lastScrollHash) {
+      this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
+
+      this.lastScrollHash = window.location.hash
+    }
   }
 
   onAvatarChange (formData: FormData) {
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index c77dc97de..5541f5558 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -123,6 +123,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     const scrollEvent = eventsObs.pipe(filter((e: Event): e is Scroll => e instanceof Scroll))
 
     scrollEvent.subscribe(e => {
+      console.log(e)
       if (e.position) {
         return this.viewportScroller.scrollToPosition(e.position)
       }