Angular PrimeNG ScrollTop Styling

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