Merge pull request #57 from DongreJaipal/my-fix-branch

feat(sitewide): add scroll to top button to conditionally appear in longer pages

Author: esthersoftwaredev

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

@@ -3,3 +3,6 @@
   <router-outlet />
 </div>
 <app-footer />
+@if (showScrollButton) {
+<p-button class="pageUpButton" (click)="scrollToTop()" 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 { Component, OnInit, OnDestroy, inject, Inject, HostListener } from "@angular/core";
 import { RouterOutlet } from "@angular/router";
 import { Subscription } 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,8 +24,10 @@ export class AppComponent implements OnInit, OnDestroy {
 	themeService: ThemeService = inject(ThemeService);
 	blogService: BlogService = inject(BlogService);
 	private querySubscription?: Subscription;
+	showScrollButton: boolean = false;
+	private readonly scroller = inject(ViewportScroller);
 
-	constructor(@Inject(DOCUMENT) private document: Document) {}
+	constructor(@Inject(DOCUMENT) private document: Document) { }
 
 	ngOnInit(): void {
 		this.blogURL = this.blogService.getBlogURL();
@@ -52,6 +55,20 @@ export class AppComponent implements OnInit, OnDestroy {
 			});
 	}
 
+	@HostListener('window:scroll', [])
+	onWindowScroll() {
+		const yOffset = window.pageYOffset || document.documentElement.scrollTop;
+		if (yOffset > 300) { 
+			this.showScrollButton = true;
+		} else {
+			this.showScrollButton = false;
+		}
+	}
+
+	scrollToTop() {
+		this.scroller.scrollToPosition([0, 0]);
+	}
+
 	ngOnDestroy(): void {
 		this.querySubscription?.unsubscribe();
 	}