Angular PrimeNG ScrollTop Threshold

Angular PrimeNG is a UI component catalog for angular applications. It consists of a wide range of UI components that help in making fast and scalable websites. In this article, we will see ScrollTop Threshold 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 threshold property is used to tell the scroll top component when to render the scroll top button. If the threshold property is set to 100, the scroll top button will show up when the user scrolls down by 100px. The default value is set to 400.

Syntax:

<p-scrollTop [threshold]="..."></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:

Project Structure

Example 1: This is the basic example that illustrates how to use the threshold property with the scroll top window. In this example, we set the threshold property to 100 so the scroll top button will show up when we scroll by 100 pixels.

app.component.html

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

<div style="font-size: 20px;">
    <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 targeting window by default -->
<p-scrollTop [threshold]="100"></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: In this example, we set the threshold to 1 so the scroll top button shows up as soon as we start scrolling the page down.

app.component.html

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

<div style="font-size: 20px;">
    <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 targeting window by default -->
<p-scrollTop [threshold]="1"></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:

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