Desplazamiento liso angular2

Hay un método en el objeto window llamado scrollTo(). Si establece el comportamiento en 'suavizar', la página manejará el desplazamiento suave. ejemplo (desplácese hasta la parte superior de la página):

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

Y con un ejemplo alternativo:

    try 
    { 
     window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
     } catch (e) {
      window.scrollTo(0, 0);
      }

La forma más fácil de lograr esto es mediante el uso de este polyfill: http://iamdustan.com/smoothscroll /

1. Instalarlo como: npm instalar smoothscroll-polyfill
2. Impórtalo en tu polyfill.archivo ts como: require('smoothscroll-polyfill').polyfill ();

3. Ahora puede usar la opción de comportamiento de scrollIntoView como:

   (documento.querySelector ('#'+anchor)).scrollIntoView({ comportamiento: 'suave' });

Si desea un salto de anclaje muy simple que funcione después del enrutamiento y dentro de las vistas enrutadas, también puede usar ng2-simple-page-scroll.

<a simplePageScroll href="#myanchor">Go there</a>

O justo después del enrutamiento:

<a simplePageScroll [routerLink]="['Home']" href="#myanchor">Go there</a>

Hace un simple salto instantáneo, pero funciona.

Para cualquiera que todavía esté en la búsqueda de un desplazamiento suave @alex-la respuesta de j funciona muy bien para mí en Angular 2.0, pero tuve que cambiar el servicio de ventanas a esto: -

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

function _window() : any {
    // return the global native browser window object
    return window;
}

@Injectable()
export class WindowRef {
    get nativeWindow() : any {
        return _window();
    }
}

Todos los accesorios de este blog http://juristr.com/blog/2016/09/ng2-get-window-ref / - ahora tengo un servicio de desplazamiento suave que puedo llamar desde cualquier lugar:)

Utilizo este código .

        var dis = distance  ;
        var interval = setInterval(() => {
            this.document.body.scrollTop = dis;
             dis=dis-5 ;
             if (dis<10){
                 clearInterval(interval);
             }
        }, 5);

Ejemplo:

function goToElement(elemId){
 let element = window.getElementById(elemId);
 element.scrollIntoView({behavior: "smooth"});
}

Gracias a la respuesta aceptada pude implementar un "scroll to top"suave. Desplazarse hasta la parte superior es incluso más fácil que desplazarse hasta un elemento objetivo en particular, ya que siempre nos desplazamos hasta la posición 0. Aquí está el código:

scrollTo(yPoint: number, duration: number) {
    setTimeout(() => {
        window.scrollTo(0, yPoint)
    }, duration);
    return;
}

smoothScrollToTop() {
    let startY = this.currentYPosition();
    let stopY = 0; // window top
    let distance = stopY > startY ? stopY - startY : startY - stopY;
    if (distance < 100) {
        window.scrollTo(0, stopY);
        return;
    }
    let speed = Math.round(distance / 100);
    let step = speed;
    speed = Math.max(9, speed); //min 9 otherwise it won't look smooth
    let leapY = stopY > startY ? startY + step : startY - step;
    let timer = 0;
    if (stopY > startY) {
        for (let i = startY; i < stopY; i += step) {
            // since setTimeout is asynchronous, the for-loop will will fire all scrolls
            // nearly simoultaniously. Therefore, we need to multiply the speed with
            // a counter which lets the scrolls start with a growing offset which lets the
            // setTimeout wait for a growing time till it scrolls there
            // that way, we prevent the window to scroll instantly to the target Yposition
            this.scrollTo(leapY, timer * speed);
            leapY += step; if (leapY > stopY) leapY = stopY; timer++;
        }
        return;
    } else {
        for (let i = startY; i > stopY; i -= step) {
            this.scrollTo(leapY, timer * speed);
            leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
        }
    }
}

currentYPosition() {
    // Firefox, Chrome, Opera, Safari
    if (self.pageYOffset) return self.pageYOffset;
    // Internet Explorer 6 - standards mode
    if (document.documentElement && document.documentElement.scrollTop)
        return document.documentElement.scrollTop;
    // Internet Explorer 6, 7 and 8
    if (document.body.scrollTop) return document.body.scrollTop;
    return 0;
}

Si quieres, puedes dejar que tu botón "Scroll-To-Top" aparezca dinámicamente cuando el usuario se desplace:

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

shouldShowScrollToTop: boolean = false;

onScrollFadeInOutScrollToTopButton() {
    this.shouldShowScrollToTop = (window.pageYOffset >= window.screen.height/2);
}

Y el HTML para el botón de desplazamiento hacia arriba:

<div class="back-to-top">
<button *ngIf="shouldShowScrollToTop" [@fadeInOutTrigger]="animateButtonEntryState" class="mat-primary" md-fab (click)="smoothScrollToTop()">^</button>

Como puedes ver, ese botón también tiene una animación desencadenar. Puedes pensar en usar un icono para el botón e idealmente, tu botón debería tener un estilo position:fixed;.

Hay otro enfoque, que debe ser considerado: usar jQuery.

Tal vez no es tan elegante como las soluciones nativas, pero muy fácil y funciona perfectamente.

En su índice.html tienes que añadir esto al final del cuerpo:

<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>

<script>
  $(document).on("click", "a[href*='#']:not([href='#'])", function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
          $('html, body').animate({
          scrollTop: target.offset().top - 100
          }, 1000);
          return false;
      }
    }
  });

</script>

Y ahora puedes usar la simple navegación <a href("#section")> así:

<a href="#section2">Link</a>

También funciona con enrutamiento:

<a class="btn" role="button" routerLink="/contact" fragment="contact_form">Contact us!</a>