Angular Material Design Scroll To Top Button

A

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

This is a Lightweight, Material Design inspired “go to top / scroll to top button” with no additional dependencies. Just hit the button to smoothly scroll back to the top of the page.

Features

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

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

Directive

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.

See live demo and download the source code.

DOWNLOAD | DEMO

This awesome script was developed by bartholomej. Visit their official repository for more information and follow for future updates.

FAQs

1. What is Angular Material Design Scroll To Top Button?

The Angular Material Design Scroll To Top Button is a component or feature provided by the Angular Material Design library that allows you to easily implement a scroll to top button in your Angular applications. It provides a visually appealing button that appears when the user scrolls down the page and allows them to quickly navigate back to the top.

2. How do I use the Angular Material Design Scroll To Top Button?

To use the Angular Material Design Scroll To Top Button, you need to install the Angular Material library and import the necessary components and modules. Then, you can add the scroll to top button component to your application template and configure its behavior and appearance using Angular Material directives and styles.

3. What are the benefits of using the Angular Material Design Scroll To Top Button?

The Angular Material Design Scroll To Top Button offers several benefits, including:

• Improved user experience: It allows users to easily navigate back to the top of the page, enhancing usability.
• Consistent design: The button follows the Material Design guidelines, ensuring a visually consistent and appealing look.
• Easy implementation: The Angular Material library provides ready-to-use components, making it straightforward to add the scroll to top functionality to your Angular application.

4. Can I customize the appearance of the Scroll To Top Button?

Yes, you can customize the appearance of the Angular Material Design Scroll To Top Button to match your application’s design and branding. You can modify the button’s colors, size, shape, and other visual aspects using CSS or Angular Material theming capabilities.

5. Does the Scroll To Top Button work on mobile devices?

Yes, the Angular Material Design Scroll To Top Button is responsive and works on various devices, including mobile phones and tablets. It automatically adjusts its behavior and appearance based on the device’s screen size and touch interactions.

6. Can I control when the Scroll To Top Button appears on the page?

Yes, you can control the visibility of the Scroll To Top Button based on specific conditions. For example, you can configure it to appear only when the user scrolls below a certain threshold or after a certain amount of time has passed since the page load.

7. Does the Scroll To Top Button work with infinite scrolling or dynamically loaded content?

Yes, the Scroll To Top Button can work with infinite scrolling or dynamically loaded content. You need to ensure that the button is present and positioned correctly in your application’s layout, and its behavior is properly handled when new content is added or removed dynamically.

8. Is the Scroll To Top Button accessible?

The Angular Material Design library emphasizes accessibility, and the Scroll To Top Button component follows those principles. However, it is essential to ensure that you provide sufficient visual and interactive cues for users with disabilities, such as proper labeling, keyboard accessibility, and ARIA attributes, to make the button fully accessible.

9. Are there any performance considerations when using the Scroll To Top Button?

The performance impact of the Scroll To Top Button is generally minimal. However, it is recommended to optimize your application’s performance by considering factors such as the number of DOM elements and the efficiency of event handling, especially if you have complex scroll behavior or large amounts of content.

10. Can I use the Scroll To Top Button in non-Angular applications?

The Angular Material Design Scroll To Top Button is specifically designed for Angular applications that utilize the Angular Material library. However, you can take inspiration from its implementation and adapt it for use in other frameworks or plain JavaScript applications with necessary modifications and adjustments.