JavaScriptAngularJSAngular Material Design Scroll To Top Button

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.

Material Design Angular ScrollTop Button

Features

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

Install

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

OptionTypeDefaultDescription
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.
backgroundColorstring#212121Background color (you can use all values for backgroud-color css property). You can override theme color
symbolColorstring#fafafaSymbol color (you can use all values for fill svg property). You can override theme color
sizenumber40Button size [in pixels]. (Symbol will be resized automatically)
symbolstringYou can use utf8 chars for customizing symbol. For example: 
position‘left’ | ‘right’‘right’Left or right, that is the question…
themeNgxScrollTopTheme‘gray’Material color themes

Directive

OptionTypeDefaultDescription
[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.

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.

Saroj Meher
Saroj Meherhttps://www.sarojmeher.com
Howdy! Friends, I am Saroj Meher. I am an Artist. I do Painting on mediums like Acrylic, Watercolour, Oil etc. I have over 7 years of experience in WordPress. I am currently running 30+ website. I am specialized in WordPress and WooCommerce, WordPress Theme Customization and Theme Development. I can fix any kind of WordPress error/issue like PHP, CSS, Js issues and other Theme and Plugin related issues. Client's Satisfaction is my first priority.

Subscribe For More!

Subscribe to get the Latest Updates directly in you Email box.

Explore More

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

SarojMeher-Photograph
I am a Lecturer (English & Sociology), a professional Artist, and a blogger. I do painting, sketches since my childhood. I am in the teaching for 10 years. In this teaching line, I have experience in teaching English at High School and College levels. I have also experienced teaching computer theory during the school teaching period. This is my personal web corner over the internet.

TRENDING TOPICS