<p>Angular ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.</p>
<h3 id="setup">Setup</h3>
<p>Refer to PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.</p>
<h3 id="import">Import</h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> {ScrollTopModule} <span class="hljs-keyword">from</span> <span class="hljs-string">'primeng/scrolltop'</span>;
</code></pre>
<h3 id="getting-started">Getting Started</h3>
<p>Without any configuration, ScrollTop listens window scroll.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">p-scrollTop</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p-scrollTop</span>&gt;</span>
</code></pre>
<h3 id="threshold">Threshold</h3>
<p>When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is defined with the <strong>threshold</strong> property that defaults to 400.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">p-scrollTop</span> [<span class="hljs-attr">threshold</span>]=<span class="hljs-string">"200"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p-scrollTop</span>&gt;</span>
</code></pre>
<h3 id="target-element">Target Element</h3>
<p>ScrollTop can also be assigned to its parent element by setting <strong>target</strong> as "parent".</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 400px; overflow: auto"</span>&gt;</span>
    Content that overflows to container
    <span class="hljs-tag">&lt;<span class="hljs-name">p-scrollTop</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"parent"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p-scrollTop</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<h3 id="theming">Theming</h3>
<p>ScrollTop supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primeng/showcase/#/theming">Designer</a> tool.</p>
<h3 id="resources">Resources</h3>
<p>Visit the PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/scrolltop">ScrollTop</a> showcase for demos and documentation.</p>


Angular ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.

### Setup

Refer to PrimeNG [setup documentation](https://primefaces.org/primeng/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import {ScrollTopModule} from 'primeng/scrolltop';
```

### Getting Started

Without any configuration, ScrollTop listens window scroll.

```html
<p-scrollTop></p-scrollTop>
```

### Threshold

When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is defined with the **threshold** property that defaults to 400.

```html
<p-scrollTop [threshold]="200"></p-scrollTop>
```

### Target Element

ScrollTop can also be assigned to its parent element by setting **target** as "parent".

```html
<div style="height: 400px; overflow: auto">
    Content that overflows to container
    <p-scrollTop target="parent"></p-scrollTop>
</div>
```

### Theming

ScrollTop supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primeng/showcase/#/theming) tool.

### Resources

Visit the PrimeNG [ScrollTop](https://primefaces.org/primeng/showcase/#/scrolltop) showcase for demos and documentation.