Skip to content
Lightweight, Material Design inspired "go to top button". No dependencies. Pure Angular!
TypeScript HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
.vscode
_assets
projects
scripts
.editorconfig
.gitattributes chore(git): ignore npm lock file + resolve yarn.lock as binary Oct 29, 2019
.gitignore
LICENSE
README.md docs(readme): sanitize raw svg to show images properly outside of github Oct 29, 2019
angular.json
package.json chore(deps): ng update Dec 8, 2019
tsconfig.json feat(app): initial library with example Sep 15, 2019
tslint.json
yarn.lock chore(deps): ng update Dec 8, 2019

README.md

Angular ScrollTop Button

npm version Join the chat at https://gitter.im/ngx-scrolltop/Lobby volkswagen status

Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular!

Angular 8, Ivy and SSR compatible!

Just hit the button to smoothly scroll back to the top of the page. Here's the demo.

  • Lightweight (~10 kB)
  • No dependencies
  • Material Design inspired
  • @angular/material compatible (example)
  • Component or directive way
  • Smoothly animated
  • Highly customizable options...

Demo animation

Demo (example)

Watch this: http://bartholomej.github.io/ngx-scrolltop/

Install

Automatically (recommended) 🚀

ng add ngx-scrolltop

Everything's done!

Now just see some options.

(Module imported and all settings automatically set in your project.)

Manually (old-school) 🛠

Via yarn or npm

yarn add ngx-scrolltop # npm install ngx-scrolltop --save

Setup (manually)

...
+ import { NgxScrollTopModule } from 'ngx-scrolltop';
...

@NgModule({
  imports: [
    ...
+   NgxScrollTopModule
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

Component way (default)

In app.component.html you just need to add your new button. Usually at the end of file.

<ngx-scrolltop></ngx-scrolltop>

Directive way

Your custom element somewhere in you application...

Important: (no style applied, everything is up to you. Of course I recommend position: fixed, ...)

<span
  ngxScrollTop
  class="my-custom-element-with-my-style__no-lib-style-applied-here"
>
  ↑ My Custom Element. ↑
</span>

Options

Component

Option Type Default Description
mode 'smart' | 'classic' 'classic' Smart mode shows button only when you scroll more than two screens down and then you will try to go back to top. Classic mode shows button immediately when you scroll at least one screen down.
backgroundColor string #212121 Background color (you can use all values for backgroud-color css property). You can override theme color
symbolColor string #fafafa Symbol color (you can use all values for fill svg property). You can override theme color
size number 40 Button size [in pixels]. (Symbol will be resized automatically)
symbol string You can use utf8 chars for customizing symbol. For example:
position 'left' | 'right' 'right' Left or right, that is the question...
theme NgxScrollTopTheme 'gray' Material color themes

Directive

Option Type Default Description
[ngxScrollTopMode] 'smart' | 'classic' 'classic' Smart mode shows button only when you scroll more than two screens down and then you will try to go back to top. Classic mode shows button immediately when you scroll at least one screen down.

Examples

Advanced example (component)

app.component.html

<ngx-scrolltop
  [size]="50"
  backgroundColor="#33691e"
  symbolColor="#fff"
  symbol=""
  mode="smart"
  position="left"
  theme="pink"
>
</ngx-scrolltop>

Angular Material example (directive)

@angular/material required

app.component.html

<button
  ngxScrollTop
  [ngxScrollTopMode]="'smart'"
  class="my-custom-style"
  color="primary"
  mat-mini-fab
>
  top
</button>

app.component.scss

.my-custom-style {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

Dependencies

No dependencies! Pure Angular.

License

Copyright © 2019 Lukas Bartak

Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)

All contents are licensed under the MIT license.

You can’t perform that action at this time.