UPDATED for Angular 13
Angular 13 component that lets the user return to the top of the screen, using a Material Design FAB button
A spin-off of https://github.com/annapogorelova/ng2-go-top-button (full credit here for the actual back-to-top logic).
The following changes/additions were made:
- This is a working Angular sample project that can be run locally
- Back-to-top logic contained within a reusable component ...Unused code stripped away and refactored for component-use
- Material Design FAB button used for component
Clone this repo and run npm install to install necessary packages.
Next, run ng serve to start the application.
Then in your browser, go to http://localhost:4200/
Once the page has loaded, simply scroll down the page and the back-to-top button will appear in the bottom-right corner. Click this button to return to the top of the page. Simple!
Import statement:
import { BackToTopComponent } from './components/back-to-top.component';
Add it to imports in your module declaration.
@NgModule({
...
imports: [..., BackToTopComponent],
...
In your template add <app-back-to-top></app-back-to-top>. This will add a simple button with default styles and without animated scroll.
Example of customization:
<app-back-to-top [acceleration]="1" [animate]="true" [scrollDistance]="200" [speed]="40">
</app-back-to-top>
| Property | Type | Description |
|---|---|---|
| scrollDistance | number | Number of pixels to be scrolled Y for button to be shown. Must be greater than zero. |
| animate | boolean | If true, scrolling will be animated. False by default. |
| speed | number | Speed of animated scroll. Must be greater than 1. |
| acceleration | number | Number of pixels to speed up when scrolling is animated. Zero by default - which means page will scroll with constant speed. |
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.