Angular PrimeNG ScrollTop Component

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://primeng.org/scrolltop