Open In App

Angular PrimeNG ScrollTop Styling

Last Updated : 28 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG ScrollTop Styling.

The ScrollTop is a component displayed after a specific scroll position and is used to navigate to the top of the page quickly. The ScrollTop styling is used to customize the scrolling icon and other features.

Styling: The following are the different styling classes: 

  • p-scrolltop: It is the container element.
  • p-scrolltop-sticky: It is the container element when attached to its parent.
 

Syntax:

:host ::ng-deep .p-scrolltop-sticky {
    width: 2rem;
    height: 2rem;
}

Creating Angular application & Module Installation:

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

ng new geeks_angular

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

cd geeks_angular

Step 3: Install PrimeNG in your given directory.

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

Project Structure: The project structure will look like the following:

Steps to run the application: Write the below command to run the application:

ng serve --open

Example 1: In this example, we have made the button square and changed the color on hover.

app.component.html

HTML 
<h1 style="color: green; text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG ScrollTop Styling</h3>
<p-scrollPanel [style]=
    "{ width: '250px', height: '200px' }">
    <p>
        <span>
            Achievements
            <br />
            Billions of Users, Millions of Articles 
            Published, Thousands Got Hired by Top 
            Companies and the numbers are still 
            growing.
        </span>

        <span>
            What We Offer
            <br />
            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.
        </span>
        <br /><br />
        <span>
            Prepare With Us
            <br /><br />

            Prepare for an interview with millions of 
            articles and courses designed by experts.
            <br /><br />

            Get Hired With Us
            <br /><br />
            Don’t know where to apply? Stop by 
            GeeksforGeeks where we offer multiple 
            opportunities for you to get hired Grow 
            With Us Gain and share your knowledge & 
            skills with a variety of learning platforms 
            offered by GeeksforGeeks.
        </span>
    </p>
    <p-scrollTop target="parent" 
        [threshold]="100" icon="pi pi-arrow-up">
    </p-scrollTop>
</p-scrollPanel>

app.component.scss

CSS 
:host ::ng-deep .p-scrolltop-sticky {
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
    background-color: var(--primary-color);

    &:hover {
        background-color: darkblue;
    }
}

app.component.ts

JavaScript 
import { Component } from "@angular/core";

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

app.module.ts

JavaScript 
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from 
    "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { BadgeModule } from "primeng/badge";
import { ScrollTopModule } from "primeng/scrolltop";
import { ScrollPanelModule } from "primeng/scrollpanel";

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

Output:

Example 2: In the following example, we have added a border, changed shape, and increased the size.

app.component.html

HTML 
<h1 style="color: green; text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG ScrollTop Styling</h3>
<p-scrollPanel [style]=
    "{ width: '250px', height: '200px' }">
    <p>
        <span>
            Achievements
            <br />
            Billions of Users, Millions of Articles 
            Published, Thousands Got Hired by Top 
            Companies and the numbers are still growing.
        </span>

        <span>
            What We Offer
            <br />
            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.
        </span>
        <br />
        <br />
        <span>
            Prepare With Us
            <br /><br />
            Prepare for an interview with millions of
            articles and courses designed by experts.
            <br /><br />

            Get Hired With Us
            <br /><br />
            Don’t know where to apply? Stop by 
            GeeksforGeeks where we offer multiple 
            opportunities for you to get hired Grow
            With Us Gain and share your knowledge & 
            skills with a variety of learning 
            platforms offered by GeeksforGeeks.
        </span>
    </p>
    <p-scrollTop target="parent" [threshold]="100" 
        icon="pi pi-arrow-up"></p-scrollTop>
</p-scrollPanel>

app.component.scss

CSS 
:host ::ng-deep .p-scrolltop-sticky {
    width: 3rem;
    height: 3rem;
    border-radius: 100px;
    background-color: var(--primary-color);
    border: 4px dashed green;

    &:hover {
        background-color: lightgreen;
    }
    .p-scrolltop-icon {
        font-size: 2rem;
        color: var(--primary-color-text);
    }
}

app.component.ts

JavaScript 
import { Component } from "@angular/core";

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

app.module.ts

JavaScript 
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from
 "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { BadgeModule } from "primeng/badge";
import { ScrollTopModule } from "primeng/scrolltop";
import { ScrollPanelModule } from "primeng/scrollpanel";

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

Output:

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


Next Article
Angular PrimeNG ScrollTop Styling

M
manavsarkar07
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox