Angular PrimeNG Scroll Top Threshold

Angular PrimeNG是一个用于angular应用程序的UI组件目录。它由一系列的UI组件组成，有助于制作快速和可扩展的网站。在这篇文章中，我们将看到Angular PrimeNG中的Scroll Top Threshold。

ScrollTop组件在用户向上滚动到某一滚动位置后显示，用于快速进入页面顶部。阈值属性用于告诉滚动顶端组件何时呈现滚动顶端按钮。如果阈值属性被设置为100，那么当用户向下滚动100px时，滚动顶部按钮就会显示出来。默认值被设置为400。

语法:

<p-scrollTop [threshold]="..."></p-scrollTop>

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new newapp

第2步：在创建你的项目文件夹即newapp后，使用以下命令移动到它。

cd newapp

第3步：在你的项目目录中安装PrimeNG和PrimeIcons。

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

项目结构：完成安装后，项目结构将如下所示。

Angular PrimeNG Scroll Top Threshold

Project Structure

例子1：这是一个基本的例子，说明了如何在滚动顶端窗口中使用阈值属性。在这个例子中，我们把阈值属性设置为100，这样当我们滚动100个像素时，滚动顶端的按钮就会显示出来。

<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>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent {}

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 { }

输出:

Angular PrimeNG Scroll Top Threshold

例子2：在这个例子中，我们将阈值设置为1，这样一来，一旦我们开始向下滚动页面，滚动顶部的按钮就会出现。

<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>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent { }

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 { }

输出:

Angular PrimeNG Scroll Top Threshold