Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Angular PrimeNG ScrollTop Component

  • Last Updated : 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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!