Angular PrimeNG ScrollTop Component - GeeksforGeeks

24 Sep, 2021
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the ScrollTop component in Angular PrimeNG.
ScrollTop component: It is used to make a component that gets displayed after a certain scroll position to navigate to the top of the page.
Properties:
target: It specifies the target of the scrollTop, the valid values are “window” and “parent”. It is of string datatype & the default value is a window.
threshold: It is the threshold value after which the element is visible. It accepts the number data type as input & the default value is 400.
icon: It is the icon to display. It is of string data type & the default value is pi pi-chevron-up.
behavior: It is the scrolling behavior, “smooth” add animation and “auto” scrolls with a jump. It is of string data type & the default value is smooth.
style: It sets an inline style of the component. It is of object data type, the default value is null.
styleClass: It sets the style class of the component. It is of string data type, the default value is null.
Styling:
p-scrolltop: It is the container element.
p-scrolltop-sticky: It is the container element when attached to its parent.
 
Creating Angular application & module installation:
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Step 3: Install PrimeNG in your given directory.
npm install primeng --save
npm install primeicons --save
Project Structure: After complete installation, it will look like the following:
Example 1: This is the basic example that illustrates how to use the scrollTop component. The value of the threshold is set to 150, so the scrollTop icon will be displayed after scrolling 150 pixels.
 
app.component.html
<h2>GeeksforGeeks</h2><h5>PrimeNG ScrollTop Component</h5><p-scrollPanel [style]=    "{width: '25p0x', height: '100px'}">      <p>        Angular PrimeNG is a framework used         with angular to create components        with great styling and this framework         is very easy to use and is used to         make responsive websites. Angular         PrimeNG is a framework used with        angular to create components with         great styling and this framework is        very easy to use and is used to make         responsive websites. Angular PrimeNG         is a framework used with angular to         create components with great styling         and this framework is very easy to         use and is used to make responsive         websites.    </p>      <p-scrollTop target="parent"         [threshold]="150"         icon="pi pi-arrow-up">    </p-scrollTop></p-scrollPanel>
app.module.ts
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { BrowserAnimationsModule }     from '@angular/platform-browser/animations';import { AppComponent } from './app.component';import { ScrollTopModule } from 'primeng/scrolltop';import { ScrollPanelModule } from 'primeng/scrollpanel';  @NgModule({  imports: [    BrowserModule,    BrowserAnimationsModule,    ScrollTopModule,    ScrollPanelModule  ],  declarations: [AppComponent],  bootstrap: [AppComponent]})export class AppModule {}
app.component.ts
import { Component } from '@angular/core';  @Component({  selector: 'my-app',  templateUrl: './app.component.html'})export class AppComponent {}
Output:
Example 2: In this example, we will set the behavior property to auto, so, the animation is not visible while scrolling to the top of the element and the threshold is set to 0, so the scrollTop icon is instantly shown while scrolling.
app.component.html
<h2>GeeksforGeeks</h2><h5>PrimeNG ScrollTop Component</h5><p-scrollPanel [style]=    "{width: '300px', height: '90px'}">      <div>        <span>GeeksforGeeks</span>          <p>            A Computer Science portal for             geeks. It contains well written,             well thought and well explained             computer science and programming             articles. We provide a variety             of services for you to learn,             thrive and also have fun! Free             Tutorials, Millions of Articles,             Live, Online and Classroom Courses,            Frequent Coding Competitions,             Webinars by Industry Experts,            Internship opportunities and Job             Opportunities.        </p>    </div>      <p-scrollTop target="parent" [threshold]="0"         [behavior]='auto' icon="pi pi-arrow-up">    </p-scrollTop></p-scrollPanel>
app.module.ts
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { BrowserAnimationsModule }     from '@angular/platform-browser/animations';import { AppComponent } from './app.component';import { ScrollTopModule } from 'primeng/scrolltop';import { ScrollPanelModule } from 'primeng/scrollpanel';  @NgModule({  imports: [    BrowserModule,    BrowserAnimationsModule,    ScrollTopModule,    ScrollPanelModule  ],  declarations: [AppComponent],  bootstrap: [AppComponent]})export class AppModule {}
app.component.ts
import { Component } from '@angular/core';  @Component({  selector: 'app-root',  templateUrl: './app.component.html'})export class AppComponent {}
Output:
Reference: https://primefaces.org/primeng/showcase/#/scrolltop
Angular-PrimeNG
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular PrimeNG Messages Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?