Гладкая angular2 прокрутки

существует метод в window объект scrollTo(). Если вы установите поведение "сгладить", страница будет обрабатывать гладкую прокрутку. пример (прокрутите до верхней части страницы):

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

и резервные пример:

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

более простой способ достичь этого-использовать этот polyfill: http://iamdustan.com/smoothscroll/

1. установить его как: npm установить smoothscroll-polyfill
2. импортируйте его в свой polyfill.файл ТС в виде: require('smoothscroll-polyfill').polyfill();

3. теперь вы можете использовать опцию поведения scrollIntoView как:

   (документ.querySelector ('#'+anchor)).scrollIntoView ({ поведение: 'smooth' });

Если вы хотите очень простой переход якоря, который работает после маршрутизации и в маршрутизируемых представлениях, вы также можете использовать ng2-простой-страница-прокрутка.

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

или сразу после маршрутизации:

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

Это простой мгновенный прыжок, но он работает.

для тех, кто все еще ищет гладкую прокрутку @alex-J ' S ответ Отлично работает для меня в Angular 2.0-но мне пришлось изменить службу окон на это: -

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();
    }
}

все реквизиты для этого блога http://juristr.com/blog/2016/09/ng2-get-window-ref/ - Теперь у меня есть служба гладкой прокрутки, которую я могу вызвать из любого места:)

Я использую этот код .

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

пример:

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

благодаря принятому ответу я смог реализовать плавную "прокрутку вверх". Прокрутка вверх на самом деле даже проще, чем прокрутка до определенного целевого элемента, так как мы всегда прокручиваем до 0-позиции. Вот код:

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;
}

если вы хотите, вы можете позволить вашей кнопке "прокрутить вверх" появляться динамически, когда пользователь прокручивает:

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

shouldShowScrollToTop: boolean = false;

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

и HTML для кнопки прокрутки вверх:

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

как вы можете видеть, эта кнопка также имеет триггер анимации. Вы можете подумать об использовании значка для кнопки, и в идеале ваша кнопка должна иметь position:fixed; стиль.

существует еще один подход, который следует учитывать: использование jQuery.

возможно, это не так элегантно, как родные решения, но очень легко и отлично работает.

в свой индекс.HTML вы должны добавить это в конец тела:

<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>

и теперь вы можете использовать простой <a href("#section")> навигация вроде этого:

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

Он также работает с маршрутизацией:

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