A tutorial on implementing a "Back to Top" button that appears dynamically while scrolling in Angular

Question

A tutorial on implementing a "Back to Top" button that appears dynamically while scrolling in Angular

I've developed a scroll-to-top feature for my Angular project, but I'm facing an issue. The scroll icon appears immediately upon page load instead of only showing after the user scrolls down. Any ideas or suggestions on how to achieve this?

Here's what I'm aiming for:

Hide the scroll icon when the page loads
Show the scroll icon only when the user scrolls down

HTML

<div class="to-top" (click)="scrollToTop()" [ngClass]="{ 'show-scrollTop': windowScrolled }">
  <img src="../../../../assets/marketing-site/ecosystem/Scroll-to-Top.svg" alt="to-top-icon" />
</div>

CSS

.to-top {
  bottom: 0;
  cursor: pointer;
  margin: 0 8px 12px 0;
  position: fixed;
  right: 0;
}

.show-scrollTop {
  opacity: 1;
  transition: all 0.2s ease-in-out;
}

TS

  scrollToTop(): void {
    // scroll to the top of the body
    return this.document.body.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
      inline: 'start',
    });
  }

Check out the example I created here

html css angular typescript scroll

Answer 1

Answer №1

HTML

.scroll-top {
  bottom: 0;
  cursor: pointer;
  margin: 0 8px 12px 0;
  position: fixed;
  right: 0;
  opacity: 0;
}

.show-scrollTop {
  opacity: 1 !important;
  transition: all 0.3s ease-in-out;
}

JavaScript

windowScrolled = false;

onInit() {
  window.addEventListener('scroll', () => {
    this.windowScrolled = window.pageYOffset !== 0;
  });
}

This solution should work perfectly.

Additionally, for smooth scrolling I recommend:

scrollToTop(): void {
  window.scrollTo(0, 0);
}

Answer 2

HTML

.scroll-top {
  bottom: 0;
  cursor: pointer;
  margin: 0 8px 12px 0;
  position: fixed;
  right: 0;
  opacity: 0;
}

.show-scrollTop {
  opacity: 1 !important;
  transition: all 0.3s ease-in-out;
}

JavaScript

windowScrolled = false;

onInit() {
  window.addEventListener('scroll', () => {
    this.windowScrolled = window.pageYOffset !== 0;
  });
}

This solution should work perfectly.

Additionally, for smooth scrolling I recommend:

scrollToTop(): void {
  window.scrollTo(0, 0);
}

Answer 3

Answer №2

Your provided expression

if (window.pageXOffset || document.documentElement.scrollTo || document.body.scrollTop > 20) {
      this.windowScrolled = true;
}

appears to be always evaluating to true. To improve readability and functionality, consider revising it to something like:

if( window.pageXOffset > 20 || document.body.scrollTop > 20) {}

Note that

document.documentElement.scrollTo

is a function and may not be used in the condition as intended.

Answer 4

Your provided expression

if (window.pageXOffset || document.documentElement.scrollTo || document.body.scrollTop > 20) {
      this.windowScrolled = true;
}

appears to be always evaluating to true. To improve readability and functionality, consider revising it to something like:

if( window.pageXOffset > 20 || document.body.scrollTop > 20) {}

Note that

document.documentElement.scrollTo

is a function and may not be used in the condition as intended.

A tutorial on implementing a "Back to Top" button that appears dynamically while scrolling in Angular

Answer №1

Answer №2

Similar questions

Fieldset containing a table with a horizontal scrollbar

Working towards ensuring my website is responsive

ASP.NET Core MVC: Issue with Passing C# Razor Variable to HTML Tag

Creating a Stylish ExtJS Container with CSS: A Step-By-Step

Social media comments widget

In my attempt to assess the correlation between value 1 and a value in the preceding object, I am utilizing the *ngFor directive

Tips on eliminating the background of a div nested within another div

When attempting to load a CSS file, Java automatically redirects to the login page

What is the method to prevent scrolling on the body while allowing scrolling on a specific div element?

Using line breaks and horizontal scrolling in HTML and CSS

Guide on merging non-modular JavaScript files into a single file with webpack

Utilize swipe gestures in tables with Angular and Ionic for enhanced user interaction

Styling <Link> component with styled-components: A step-by-step guide

creating a live updating dropdown menu using Node.js and MySQL

Is there a way to only refresh the div specifically for the calendar with an id of "

Leveraging Angular 2 and Typescript for crafting a cutting-edge Chrome application

drop down menu in navigation bar: unable to display items

Which Javascript/Css/HTML frameworks and libraries would you suggest using together for optimal development?

Discover the ins and outs of the "DOM" within a string, treating it as HTML in AngularJS

Challenge with collapsing a button within a Bootstrap panel