Displaying Go To Top button when page becomes scrollable

Question

Just wondering How I can do this in Angular 2/4 : This might be easy but I just can't figure out.

Here is my code:

Let me explain it, I have a component which scrolls me to the top of the page, when I am at the bottom. But the floating div i.e, little red arrow always stays visible even when page need not scroll.

In Html:

Each button is dynamically linked to div. So div displays when button is clicked

<div *ngFor="let sampledata of SAMPLEDATA; trackBy: trackId">
     <button  (click)="transmitInfo(sampledata ,0)" > </button>
     <div *ngFor="let data of sampledata .data; trackBy: trackId" >
         <button  (click)="transmitInfo(data,1)" > </button>
     </div>
     <!-- This keeps on going -->
</div>

<div>
     <div *ngIf="renderdata === 0"> {{Object Data}}</div>
     <div *ngIf="renderdata === 1">{{Object Data}}</div>
     <div *ngIf="renderdata === 2">{{Object Data}}</div>
</div>

<div id="scroolUpRight">
   <img src="../../../content/images/scrollup.png" width="50px" height="50px" (click)="scrollToTop()">
</div>

Let's assume when a user clicks on button 2 or 3, 2nd or 3rd div is displayed based on button clicked, this div's are a huge data. Page automatically becomes scrollable when these are activated.

In Css:

#scroolUpRight {
    position: fixed;
    bottom: 4%;
    right: 2%;
}

#scroolUpRight :hover {
    cursor: pointer;
}

In my Component I have this to take me to the top of the page:

ngOnInit() {
  this.renderdata = 0;
}

transmitInfo(data, type): void {
        if (type === 1) { this.sampleData = data; this.renderdata = 1; }
        if (type === 2) { this.dataData = data; this. renderdata = 2; }
    }

scrollToTop() {
    return window.scrollTo(0, 0);
}

Now I don't know if this works but I did this:

toogleScroolButton(): void {
        if (window.screenY > 300 ) {
            console.log('window length is 300 +');
        }
}

But this is a function. How can I make a function or component that auto detects when page becomes scrollable and display this div, hide it when not scrollable.

Expected Result : Is to make this div visible once person starts to scroll.

Previous Knowledge:

I used Javascript and Jquery before to do the same. But how do I use angular2,4 or higher for this? Reason I need this is to animate this div when person starts to scroll.

I do accept recommendations to optimize the above code. Please do let me know if any.. ;)

Answer 1

This Worked. I need to get HostListener to get windows scroll even to see if I can scroll the page.

window.scrollY gives me the scroll page size which helps me in finding out if I am scrolling my page. If scrollY reaches to certain count I can say I am scrolling down i.e, I can trigger an *ngIf to true if I am scrolling bottom else I can make it false. Code Below :)

Add

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

export class BlaBlaBla {

    //And this did the trick
    activateGoTop : boolean;

    OnNgInit :: activateGoTop = false /* added Silly Reference please put this in ngOnInit() { --- }*/

    @HostListener('window:scroll',[])
    onWindowScroll() {
         if ( window.scrollY > 100 ) {
            this.activateGoTop = true;
         } else {
            this.activateGoTop = false;
         }
     }
}

in Html:

//Gets activated when screenY is scrolled for more than 100px

<div id="scroolUpRight" *ngIf="activateGoTop">
      <img src="../../../content/images/scrollup.png" width="50px" height="50px" (click)="scrollToTop()">
 </div>

Hope this helps someOne .. ;)

Answer 2

You can use a simple *ngIf binding with your method:

<div *ngIf="scrollButton()">
    Top <button>up button</button>
</div>

with scrollButton() method simple as that:

public scrollButton():boolean {
    return window.screenY > 300;
}

The div will only get rendered if scrollButton() method returns true, this allows you to customize your top button render conditions easily, because you only need to return a boolean from it.