Custom Back to Top Button in Angular using TypeScript

A ‘back-to-top‘ button in an Angular application is a typical enhancement for user experience. This button lets users quickly scroll back to the top of a long page without manually scrolling, which is particularly helpful on content-heavy websites. To implement a back-to-top button in an Angular application, here’s how to do it:

1. Create a new Angular project or navigate to your existing project’s directory.

ng new my-angular-app
cd my-angular-app

2. Generate a new component for the back-to-top button.

ng generate component back-to-top

3. Edit the back-to-top component’s HTML and CSS to create the button. Open src/app/back-to-top/back-to-top.component.html and src/app/back-to-top/back-to-top.component.css and add the following code:

back-to-top.component.html:

<button class="back-to-top" (click)="scrollToTop()">Back to Top</button>

back-to-top.component.css (customize the styling as needed):

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: none;
}

.back-to-top.show {
  display: block;
}

4. Edit the back-to-top component’s TypeScript file (src/app/back-to-top/back-to-top.component.ts) to add the scrolling functionality:

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-back-to-top',
  templateUrl: './back-to-top.component.html',
  styleUrls: ['./back-to-top.component.css']
})
export class BackToTopComponent {

  @HostListener('window:scroll', [])
  onWindowScroll() {
    this.toggleBackToTopButton();
  }

  scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  toggleBackToTopButton() {
    const button = document.querySelector('.back-to-top');
    if (button) {
      button.classList.toggle('show', window.scrollY > 300);
    }
  }
}

In this code, we listen to the window:scroll event and use the scrollTo() method to scroll to the top of the page when the button is clicked. We also toggle the visibility of the button based on the user’s scroll position.

5. Use the back-to-top component in your application. Open the src/app/app.component.html file and add the following line where you want the button to appear (typically at the bottom of the page):

<app-back-to-top></app-back-to-top>

6. Start your Angular application.

ng serve

Now, when you scroll down the page, the “Back to Top” button should appear after scrolling down 300 pixels or more, and clicking it will smoothly scroll you back to the top of the page.

It’s important to customize the button’s appearance and positioning in CSS to meet your application’s design requirements.

That’s it!

If you have any queries then please let me know in the comments section. If you think this post saved your time, please subscribe to our newsletter for regular updates.

Thank you in advance!