Reusable floating buttons that scroll a container (or the window) to the top or bottom. They appear only when scrolling past a threshold, use ply-icon-button styling, and work with zoneless change detection.
Point target at a scrollable element and set [fixed]="false" so the buttons sit inside a relative wrapper.
Scroll this panel — buttons appear at the corners.
Section 1 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 2 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 3 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 4 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 5 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 6 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 7 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 8 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 9 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 10 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 11 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 12 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 13 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 14 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 15 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 16 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 17 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 18 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 19 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 20 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 21 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 22 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 23 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 24 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="relative">
<div id="scroll-demo-panel" class="h-80 overflow-y-auto">
<!-- scrollable content -->
</div>
<ply-scroll-top
target="#scroll-demo-panel"
[fixed]="false"
[threshold]="80"
position="bottom-right"
color="primary"
class="bottom-4! right-4!">
</ply-scroll-top>
<ply-scroll-bottom
target="#scroll-demo-panel"
[fixed]="false"
[threshold]="80"
position="bottom-left"
color="default"
class="bottom-4! left-4!">
</ply-scroll-bottom>
</div>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add scroll-buttons
// Paths are relative to aliases.components (default: src/app/components)
import { ScrollBottomComponent } from './scroll-buttons/scroll-bottom.component';
import { ScrollTopComponent } from './scroll-buttons/scroll-top.component';
@Component({
selector: 'app-scroll-buttons-example',
imports: [
ScrollBottomComponent,
ScrollTopComponent
],
template: `...`
})
export class ScrollButtonsExampleComponent {}Install
npx ply-ui-cli add scroll-buttons
Reuse ply-icon-buttoncolor and size inputs.
Accent / small scroll-top on the right.
Line 1 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 2 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 3 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 4 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 5 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 6 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 7 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 8 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 9 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 10 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 11 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 12 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 13 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 14 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 15 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Line 16 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
<ply-scroll-top target="#scroll-demo-sizes" [fixed]="false" [threshold]="60" position="bottom-right" color="accent" size="sm" class="bottom-3! right-3!"> </ply-scroll-top>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add scroll-buttons
// Paths are relative to aliases.components (default: src/app/components)
import { ScrollBottomComponent } from './scroll-buttons/scroll-bottom.component';
import { ScrollTopComponent } from './scroll-buttons/scroll-top.component';
@Component({
selector: 'app-scroll-buttons-example',
imports: [
ScrollBottomComponent,
ScrollTopComponent
],
template: `...`
})
export class ScrollButtonsExampleComponent {}Install
npx ply-ui-cli add scroll-buttons
Default [fixed]="true" pins the buttons to the viewport. With target="nearest", they control the closest scrollable ancestor (this docs page scroller). Scroll the page to reveal them (bottom-right stack).
Page block 1 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 2 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 3 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 4 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 5 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 6 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 7 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 8 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 9 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 10 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 11 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 12 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 13 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 14 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 15 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 16 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 17 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 18 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 19 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 20 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 21 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 22 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 23 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Page block 24 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
<!-- Place once in your page template (fixed to the viewport) --> <ply-scroll-top target="nearest" [threshold]="200" color="primary" position="bottom-right" class="bottom-6! right-6!"> </ply-scroll-top> <ply-scroll-bottom target="nearest" [threshold]="200" color="default" position="bottom-right" class="bottom-20! right-6!"> </ply-scroll-bottom>
import { ScrollTopComponent } from './scroll-buttons/scroll-top.component';
import { ScrollBottomComponent } from './scroll-buttons/scroll-bottom.component';
@Component({
imports: [ScrollTopComponent, ScrollBottomComponent],
// ...
})
export class YourComponent {}
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add scroll-buttons
// Paths are relative to aliases.components (default: src/app/components)
import { ScrollBottomComponent } from './scroll-buttons/scroll-bottom.component';
import { ScrollTopComponent } from './scroll-buttons/scroll-top.component';
@Component({
selector: 'app-scroll-buttons-example',
imports: [
ScrollBottomComponent,
ScrollTopComponent
],
template: `...`
})
export class ScrollButtonsExampleComponent {}Install
npx ply-ui-cli add scroll-buttons
Add both components (shared package) with:
npx ply-ui-cli add scroll-buttons
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add scroll-buttons
// Paths are relative to aliases.components (default: src/app/components)
import { ScrollBottomComponent } from './scroll-buttons/scroll-bottom.component';
import { ScrollTopComponent } from './scroll-buttons/scroll-top.component';
@Component({
selector: 'app-your-component',
imports: [
ScrollBottomComponent,
ScrollTopComponent
],
template: `...`
})
export class YourComponent {} API for scroll-buttons — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-scroll-bottom | ariaLabel | unknown | 'Scroll to bottom' | Accessible label for the button. |
ply-scroll-top | ariaLabel | unknown | 'Scroll to top' | Accessible label for the button. |
Content