title: Displaying Go To Top button when page becomes scrollable
body: <p>Just wondering How I can do this in Angular 2/4 : This might be easy but I just can't figure out.</p>
  
  <p>Here is my code: </p>
  
  <p>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. </p>
  
  <p>In Html: </p>
  
  <p>Each button is dynamically linked to div. So div displays when button is clicked</p>
  
  <pre><code>&lt;div *ngFor="let sampledata of SAMPLEDATA; trackBy: trackId"&gt;
       &lt;button  (click)="transmitInfo(sampledata ,0)" &gt; &lt;/button&gt;
       &lt;div *ngFor="let data of sampledata .data; trackBy: trackId" &gt;
           &lt;button  (click)="transmitInfo(data,1)" &gt; &lt;/button&gt;
       &lt;/div&gt;
       &lt;!-- This keeps on going --&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
       &lt;div *ngIf="renderdata === 0"&gt; {{Object Data}}&lt;/div&gt;
       &lt;div *ngIf="renderdata === 1"&gt;{{Object Data}}&lt;/div&gt;
       &lt;div *ngIf="renderdata === 2"&gt;{{Object Data}}&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="scroolUpRight"&gt;
     &lt;img src="../../../content/images/scrollup.png" width="50px" height="50px" (click)="scrollToTop()"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>In Css:</p>
  
  <pre><code>#scroolUpRight {
      position: fixed;
      bottom: 4%;
      right: 2%;
  }
  
  #scroolUpRight :hover {
      cursor: pointer;
  }
  </code></pre>
  
  <p>In my Component I have this to take me to the top of the page:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>Now I don't know if this works but I did this:</p>
  
  <pre><code>toogleScroolButton(): void {
          if (window.screenY &gt; 300 ) {
              console.log('window length is 300 +');
          }
  }
  </code></pre>
  
  <p>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. </p>
  
  <p><strong>Expected Result :</strong> Is to make this div visible once person starts to scroll. </p>
  
  <blockquote>
    <p>Previous Knowledge:</p>
    
    <p>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.</p>
  </blockquote>
  
  <p>I do accept recommendations to optimize the above code. Please do let me know if any.. ;)</p>