title: Smooth scroll angular2
body: <p>I am having trouble getting a smooth scroll service to work in angular 2.  Are there any services for smooth scrolling, or plain anchor scrolling, that might work until the angular 2 team gets the $anchorScroll angular2 equivalent working?</p>
  
  <p>So far I have just tried:</p>
  
  <p>Setting *ngFor loop incremental id on a parent div</p>
  
  <pre><code>[attr.id]="'point' + i"
  </code></pre>
  
  <p>Calling a scrollto on a button with the id passed</p>
  
  <pre><code>&lt;button 
       type="button" 
       class="btn btn-lg btn-default " 
       (click)="smoothScroll('point'+i)"&gt;
             Scroll to point
  &lt;/button&gt;
  </code></pre>
  
  <p>And in the associated component I am trying to implement a plain js smooth scroll function</p>
  
  <pre><code>smoothScroll(eID) {
          var startY = currentYPosition();
          var stopY = elmYPosition(eID);
          var distance = stopY &gt; startY ? stopY - startY : startY - stopY;
          if (distance &lt; 100) {
              scrollTo(0, stopY); return;
          }
          var speed = Math.round(distance / 100);
          if (speed &gt;= 20) speed = 20;
          var step = Math.round(distance / 25);
          var leapY = stopY &gt; startY ? startY + step : startY - step;
          var timer = 0;
          if (stopY &gt; startY) {
              for (var i = startY; i &lt; stopY; i += step) {
                  setTimeout(this.win.scrollTo(0, leapY), timer * speed);
                  leapY += step; if (leapY &gt; stopY) leapY = stopY; timer++;
              } return;
          }
          for (var i = startY; i &gt; stopY; i -= step) {
              setTimeout(this.win.scrollTo(0,leapY), timer * speed);
              leapY -= step; if (leapY &lt; stopY) leapY = stopY; timer++;
          }
      }
  function currentYPosition() {
      // Firefox, Chrome, Opera, Safari
      if (self.pageYOffset) return self.pageYOffset;
      // Internet Explorer 6 - standards mode
      if (document.documentElement &amp;&amp; document.documentElement.scrollTop)
          return document.documentElement.scrollTop;
      // Internet Explorer 6, 7 and 8
      if (document.body.scrollTop) return document.body.scrollTop;
      return 0;
  }
  function elmYPosition(eID) {
      var elm = document.getElementById(eID);
      var y = elm.offsetTop;
      var node = elm;
      while (node.offsetParent &amp;&amp; node.offsetParent != document.body) {
          node = node.offsetParent;
          y += node.offsetTop;
      } return y;
  }
  </code></pre>
  
  <p>I'm also trying to give access to the window for the this._win.scrollTo which is coming from a window provider service</p>
  
  <pre><code>import {Injectable, Provider} from 'angular2/core';
  import {window} from 'angular2/src/facade/browser';
  import {unimplemented} from 'angular2/src/facade/exceptions';
  
  function _window(): Window {
    return window
  }
  
  export abstract class WINDOW {
    get nativeWindow(): Window {
      return unimplemented();
    }
  }
  
  class WindowRef_ extends WINDOW {
    constructor() {
      super();
    }
    get nativeWindow(): Window {
      return _window();
    }
  }
  
  export const WINDOW_PROVIDERS = [
    new Provider(WINDOW, { useClass: WindowRef_ }),
  ];
  </code></pre>
  
  <p>** EDIT
  ---------------------**</p>
  
  <p>I changed the this.win.scrollTo to this.win.window.scrollTo and now I am getting an effect similar to angular1.x $anchorscroll where the scroll is a snappy just instead of a smooth transition, but the scroll is not smooth and I am getting the following exception error.</p>
  
  <p><a href="https://i.stack.imgur.com/RBFNl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RBFNl.png" alt="Exception error"></a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I am no longer getting that error after finding out that angular2 is doing the setTimeout a bit differently, but the scroll is still instantaneous and not a smooth scroll.</p>
  
  <p>I changed </p>
  
  <pre><code>  setTimeout(this.win.scrollTo(0, leapY), timer * speed);
  </code></pre>
  
  <p>to</p>
  
  <pre><code> setTimeout(() =&gt; this.win.scrollTo(0, leapY), timer * speed);
  </code></pre>