Angular PrimeNG ScrollTop Target Element
Last Updated :
24 Sep, 2022
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 >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...