import { Component } from '@angular/core';
import { WrBackTop } from 'ngwr/back-top';
@Component({ imports: [WrBackTop] })
export class MyComponent {}Back to Top
A floating button that scrolls the page back to the top.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Demo
The button appears after visibilityThreshold pixels of scroll.
<wr-back-top visibilityThreshold="400" [offset]="80" />Your own glyph
Projected content replaces the arrow.
<!-- Register the icon with provideWrIcons(). -->
<wr-back-top>
<wr-icon name="arrow-up" />
</wr-back-top>API
| Name | Description | Type | Default |
|---|---|---|---|
visibilityThreshold | Show the button once window.scrollY exceeds this many pixels. | number | 400 |
offset | Pixel offset subtracted from the scroll target — for sticky headers. | number | 0 |
ariaLabel | Accessible label for the button. Falls back to backTop.label, then 'Back to top'. | string | null | null |
Dependencies
| Built on | WrScroll |
|---|
See also
Component AnchorIn-page links that highlight the section in view.Directive wrAffixStick an element to the top on scroll and style it while it is stuck.Component Speed DialA floating button that opens a set of related actions.Guide Mobile & responsiveMake ngwr layouts work on touch screens and narrow containers.Service WrScrollScroll to an element, id, selector or position, with an offset for sticky headers.