feat(component): add new feature button : returns the user to the beginning of the page

Author: DongreJaipal

angular-primeng-app/src/app/app.component.html

@@ -3,3 +3,6 @@
   <router-outlet />
 </div>
 <app-footer />
+@if (enableScrollUp) {
+<p-button class="pageUpButton" (click)="goPageTop()" icon="pi pi-angle-up" [rounded]="true" size="small"></p-button>
+}

angular-primeng-app/src/app/app.component.scss

@@ -5,3 +5,10 @@
   min-height: 74vh;
   width: 100%;
 }
+
+.pageUpButton {
+  position: fixed;
+  bottom: 10px;
+  right: 14px;
+}
+

angular-primeng-app/src/app/app.component.ts

@@ -1,17 +1,18 @@
 import { Component, OnInit, OnDestroy, inject, Inject } from "@angular/core";
 import { RouterOutlet } from "@angular/router";
-import { Subscription } from "rxjs";
+import { Subscription, fromEvent } from "rxjs";
 import { BlogInfo } from "./models/blog-info";
 import { BlogService } from "./services/blog.service";
 import { ThemeService } from "./services/theme.service";
-import { DOCUMENT } from "@angular/common";
+import { DOCUMENT, ViewportScroller } from "@angular/common";
 import { HeaderComponent } from "./components/header/header.component";
 import { FooterComponent } from "./components/footer/footer.component";
+import { ButtonModule } from "primeng/button";
 
 @Component({
 	selector: "app-root",
 	standalone: true,
-	imports: [RouterOutlet, HeaderComponent, FooterComponent],
+	imports: [RouterOutlet, HeaderComponent, FooterComponent,ButtonModule],
 	templateUrl: "./app.component.html",
 	styleUrl: "./app.component.scss",
 })
@@ -23,6 +24,9 @@ export class AppComponent implements OnInit, OnDestroy {
 	themeService: ThemeService = inject(ThemeService);
 	blogService: BlogService = inject(BlogService);
 	private querySubscription?: Subscription;
+	private scrollEvntSub?: Subscription;
+	enableScrollUp: boolean=false;
+	private readonly scroller = inject(ViewportScroller);
 
 	constructor(@Inject(DOCUMENT) private document: Document) {}
 
@@ -50,9 +54,30 @@ export class AppComponent implements OnInit, OnDestroy {
 					});
 				}
 			});
+
+		this.scrollEvntSub = fromEvent(this.document, 'scroll')
+			.subscribe(() => {
+				if (this.calculatePositionScroll() > 50)
+					this.enableScrollUp = true;
+				else
+					this.enableScrollUp = false;
+			})
+	}
+
+	goPageTop() {
+		this.scroller.scrollToPosition([0, 0]);
+	}
+
+	calculatePositionScroll(): number {
+		var scrollTop = this.document.documentElement.scrollTop;
+		var docHeight = this.document.documentElement.scrollHeight;
+		var winHeight = this.document.documentElement.clientHeight;
+		var scrollPercent = (scrollTop) / (docHeight - winHeight);
+		return Math.round(scrollPercent * 100);
 	}
 
 	ngOnDestroy(): void {
+		this.scrollEvntSub?.unsubscribe();
 		this.querySubscription?.unsubscribe();
 	}
 }