Scroll to top Button for Angular

“Sometimes we need to see the top” — me picture by Remi Yuan on Unsplash

Whenever developing an Angular based web application we need a Scroll To Top button. Because there will be always some page which becomes very long and users need to scroll forever to get back to the top of the page.

There are some packages for Scroll To Top button. But we will build a custom scroll to top button in a separate component here. And will call it to our desired location.

Before starting, I will assume that you have a basic to intermediate knowledge of using Angular CLI. We will use it to generate angular components for this project.

Home Component

At first, let’s create a component called Home. Suppose this is the component which will be shown in our homepage and will have long content. Now we put as much content as we can in this page so that the scroller is visible. For demo content use Lorem Ipsum. So that we can scroll the page where this component is used.

Add the following code in home.component.html

<div class="longDiv">
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit...
   </p>
</div>

Now let’s call the home component in our app.component.html file

<app-home></app-home>

Scroll To Top Component

Now we will generate a new component called scroll-top. In scroll-top’s component html file please copy and paste the following code.

<!--Scroll to top-->
<div class="scroll-to-top" [ngClass]="{'show-scrollTop': windowScrolled}">
  <button (click)="scrollToTop()">
      <i class="fa fa-chevron-up"></i>
  </button>
</div>

In the above code, we have created a div with class scroll-to-top and uses a conditional class with [ngClass] which is a built-in directive of angular. This directive will add show-scrollTop class to this div if windowScrolled variables value is true. Which we will set programmatically in the component.ts file.

Now inside the scroll-to-top div we have created a button which has an up icon inside it. And we have used a click event binding on the button with (click) and triggered a function called scrollTop() with it.

To style our scroll to top button please add the following css code in the scroll-top-component.css file

.scroll-to-top {
 position: fixed;
 bottom: 15px;
 right: 15px;
 opacity: 0;
 transition: all .2s ease-in-out;
}
.show-scrollTop {
 opacity: 1;
 transition: all .2s ease-in-out;
}

Now let’s add the variables and functions to our scroll-top’s component ts file.

Please see the following code which we used in our scroll-top.component.ts file

import { Component, OnInit, Inject, HostListener } from '@angular/core';
import { DOCUMENT } from "@angular/platform-browser";
@Component({
    selector: 'app-scroll-top',
    templateUrl: './scroll-top.component.html',
    styleUrls: ['./scroll-top.component.css']
})
export class ScrollTopComponent implements OnInit {
    windowScrolled: boolean;
    constructor(@Inject(DOCUMENT) private document: Document) {}
    @HostListener("window:scroll", [])
    onWindowScroll() {
        if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 100) {
            this.windowScrolled = true;
        } 
       else if (this.windowScrolled && window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop < 10) {
            this.windowScrolled = false;
        }
    }
    scrollToTop() {
        (function smoothscroll() {
            var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
            if (currentScroll > 0) {
                window.requestAnimationFrame(smoothscroll);
                window.scrollTo(0, currentScroll - (currentScroll / 8));
            }
        })();
    }
    ngOnInit() {}
}

At first, here we have declared a variable called windowScrolled as boolean. After that, we have imported Inject and HostListener from angular core and DOCUMENT from angular platform browser because we will need them. Then we will add Document in the constructor method as dependency injection.

After that, we have used HostListener decorator to listen to the window scroll event. Now in onWindowScroll function, we have checked if window scroll position is greater than 100px or not. If it is greater than 100px then we have made the windowScrolled variable true and false if the window scroll position is less than 10px.

And now in our scrollToTop function which is triggered when we press the Scroll To Top button,

We have smoothly scrolled the window to top with window.scrollTo function by the fraction of 8 from 0 to current scroll position recursively with window.requestAnimationFrame function.

Now, let’s call out scroll to top component in our home component’s html file.

<app-scroll-top></app-scroll-top>

So, at last, we have made our desired custom scroll to top button without installing any additional package. You can check the demo of stackblitz below or go to this link.

scrolltotop - StackBlitz

Conclusion

We will always need this Scroll To Top button in any app we build with Angular. Feel free to use this code in your projects. You can customize the button as like as you want with css. I have already used it.