Angular PrimeNG ScrollTop目标元素

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来制作响应式网站非常容易。在这篇文章中，我们将知道如何在Angular PrimeNG中使用Scroll Top目标元素。

ScrollTop组件在用户向上滚动到某一滚动位置后显示，用于快速进入页面顶部。scrollTop组件的目标属性是用来设置ScrollTop将监听哪个元素的滚动。它只接受两个值”window”和”parent”。默认值是”window”。

语法:

<p-scrollTop target="..."></p-scrollTop>

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

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

ng new newapp

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

cd newapp

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

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

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

例子1：这个例子显示了**ScrollTop元素的基本使用，该元素默认是听从窗口滚动的。

<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>
  
<!-- ScrollTop Element listening to "window" scroll -->
<p-scrollTop></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 { }

输出:

例子2：这个例子显示了一个ScrollTop组件通过设置其目标属性为 “父 “来监听其父元素的滚动。

<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>
        
        <!-- ScrollTop Element listening to "parent" scroll -->
        <p-scrollTop target="parent" 
                     [threshold]="100">
          </p-scrollTop>
    </p-scrollPanel>
</div>

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

输出: