Angular PrimeNG ScrollTop Target Element

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 Target Element in Angular PrimeNG.

The ScrollTop Component is displayed after the user has scrolled up to a certain scroll position and is used to go to the top of the page quickly. The target property of the scrollTop component is used to set which element’s scroll will the ScrollTop will listen to. It accepts only 2 values “window” and “parent“. The default value is “window“.

Syntax:

<p-scrollTop target="..."></p-scrollTop>

Creating Angular application & module installation:

Step 1: Create an Angular application using the below command.

ng new newapp

Step 2: After creating your project folder i.e. newapp, move to it using the below command.

cd newapp

Step 3: Install PrimeNG and PrimeIcons in your project directory.

npm install primeng --save
npm install primeicons --save

Project Structure: After complete installation, the project structure will look like the following:

Example 1: This example shows the basic use of the ScrollTop element which is listening to the window scroll by default.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG ScrollTop Target</h3>

<div style="font-size: 22px;">
    <h2> About GeeksforGeeks </h2>
    <p>
        GeeksforGeeks is a computer
        science portal for geeks.
        It offers thousands of written
        articles on various computer science
        topics. Some of the topics are
        listed below:
    </p>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Php</li>
        <li>Bootstrap</li>
        <li>NodeJS</li>
        <li>ReactJS</li>
        <li>AngularJS</li>
        <li>ExpressJS</li>
        <li>Tailwind</li>
        <li>Bulma</li>
        <li>Foundation</li>
        <li>React Desktop</li>
        <li>jQuery UI</li>
        <li>jQuery Mobile</li>
        <li>Typescript</li>
        <li>p5.js</li>
        <li>Tensorflow.js</li>
        <li>Python</li>
        <li>C/C++</li>
        <li>C/C++</li>
        <li>DSA</li>
        <li>Java</li>
        <li>Ruby</li>
        <li>Machine Learning</li>
        <li>Database Management System</li>
        <li>Compiler Design</li>
    </ul>
</div>

<!-- ScrollTop Element listening to "window" scroll -->
<p-scrollTop></p-scrollTop>

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent {}

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { ScrollTopModule } from 'primeng/scrolltop';
import { ScrollPanelModule } from 'primeng/scrollpanel';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ScrollTopModule,
        ScrollPanelModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: This example shows a ScrollTop component listening to the scroll of its parent element by setting its target property to “parent”.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG ScrollTop Target</h3>

<div style="font-size: 22px;">
    <h2> About GeeksforGeeks </h2>
    <p-scrollPanel [style]="{width: '300px',
                             height: '300px'}">
        <p>
            GeeksforGeeks is a computer
            science portal for geeks.
            It offers thousands of written
            articles on various computer science
            topics. Some of the topics are
            listed below:
        </p>

        <ul>
            <li>ExpressJS</li>
            <li>Tailwind</li>
            <li>Bulma</li>
            <li>Foundation</li>
            <li>React Desktop</li>
            <li>jQuery UI</li>
            <li>jQuery Mobile</li>
            <li>Typescript</li>
            <li>p5.js</li>
            <li>Tensorflow.js</li>
            <li>Python</li>
            <li>C/C++</li>
            <li>C/C++</li>
            <li>DSA</li>
        </ul>

        <!-- ScrollTop Element listening to "parent" scroll -->
        <p-scrollTop target="parent"
                     [threshold]="100">
          </p-scrollTop>
    </p-scrollPanel>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent {}

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { ScrollTopModule } from 'primeng/scrolltop';
import { ScrollPanelModule } from 'primeng/scrollpanel';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ScrollTopModule,
        ScrollPanelModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/scrolltop