web-dev-qa-db-ja.com

Angular 5 Routeクリックごとに一番上までスクロール

angular 5を使用しています。小さいコンテンツのセクションがほとんどないコンテンツと、大きいコンテンツのセクションがほとんどないため、トップに移動中にルーターを変更すると問題が発生します。上に行くためにスクロールする必要があるたびに。誰でも私がこの問題を解決するのを手伝うことができますので、ルーターを変更したときに私の視野は常に一番上にあります。

前もって感謝します。

javascriptangulartypescriptscrolltopangular-router
52
raihan

Angular 6でこの問題に直面した場合は、パラメーターscrollPositionRestoration: 'enabled'をapp-routing.module.tsのRouterModuleに追加することで修正できます。

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'enabled'
  })],
  exports: [RouterModule]
})
31
Nimezzz

編集： Angular 6+の場合、Nimesh Nishara Indimagedaraの回答に言及してください：

RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'
});

元の回答：

すべてが失敗した場合、テンプレート（または親テンプレート）のid = "top"を使用して、上部に空のHTML要素（例：div）を作成（または目的の場所にスクロール）します。

<div id="top"></div>

コンポーネント内：

  ngAfterViewInit() {
    // Hack: Scrolls to top of Page after page view initialized
    let top = document.getElementById('top');
    if (top !== null) {
      top.scrollIntoView();
      top = null;
    }
  }
15
GeoRover

Angular 6.1でscrollPositionRestorationオプションを使用できるビルトインソリューションがあります。

my answer onAngular 2経路変更で先頭にスクロールを参照してください。

14
Abdul Rafay

@Vegaは質問に対する直接的な回答を提供しますが、問題があります。ブラウザの戻る/進むボタンが壊れます。ユーザーがブラウザの「戻る」または「進む」ボタンをクリックすると、場所が失われ、上部がスクロールされます。ユーザーがリンクにたどり着くまでスクロールダウンし、スクロールバーが一番上にリセットされていることを確認するためだけに戻ることに決めた場合、これはユーザーにとって少し苦痛になる可能性があります。

これが私の問題の解決策です。

export class AppComponent implements OnInit {
  isPopState = false;

  constructor(private router: Router, private locStrat: LocationStrategy) { }

  ngOnInit(): void {
    this.locStrat.onPopState(() => {
      this.isPopState = true;
    });

    this.router.events.subscribe(event => {
      // Scroll to top if accessing a page, not via browser history stack
      if (event instanceof NavigationEnd && !this.isPopState) {
        window.scrollTo(0, 0);
        this.isPopState = false;
      }

      // Ensures that isPopState is reset
      if (event instanceof NavigationEnd) {
        this.isPopState = false;
      }
    });
  }
}
5
Sal_Vader_808

私の場合、私はちょうど追加しました

window.scroll(0,0);

ngOnInit()およびその動作は正常です。

2
Zohab Ali

これを試して

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'top'
  })],
  exports: [RouterModule]
})

このコードはangular 6 <=をサポートしました

1
Rokive

これを試して：

app.component.ts

import {Component, OnInit, OnDestroy} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';
import {filter} from 'rxjs/operators';
import {Subscription} from 'rxjs';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
    subscription: Subscription;

    constructor(private router: Router) {
    }

    ngOnInit() {
        this.subscription = this.router.events.pipe(
            filter(event => event instanceof NavigationEnd)
        ).subscribe(() => window.scrollTo(0, 0));
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}
1
Eray T

コンポーネント：テンプレートでアクションを作成する代わりにすべてのルーティングイベントをサブスクライブし、NavigationEnd b/cでスクロールします。ルートが正常にナビゲートされてから、スクロールがスムーズになります。それ以外の場合は、何もしません。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {

  router$: Subscription;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router$ = this.router.events.subscribe(next => this.onRouteUpdated(next));
  }

  ngOnDestroy() {
    if (this.router$ != null) {
      this.router$.unsubscribe();
    }
  }

  private onRouteUpdated(event: any): void {
    if (event instanceof NavigationEnd) {
      this.smoothScrollTop();
    }
  }

  private smoothScrollTop(): void {
    const scrollToTop = window.setInterval(() => {
      const pos: number = window.pageYOffset;
      if (pos > 0) {
          window.scrollTo(0, pos - 20); // how far to scroll on each step
      } else {
          window.clearInterval(scrollToTop);
      }
    }, 16);
  }

}

HTML

<router-outlet></router-outlet>
1
Joshua Michael Calafell

画面のスクロールの調整を含む関数を作成するだけです

例えば

window.scroll(0,0) OR window.scrollTo() by passing appropriate parameter.

window.scrollTo（xpos、ypos）->期待されるパラメーター。

1
Vijay Barot

コンポーネントごとに初めてアクセスした場合にのみコンポーネントの上部にスクロールするソリューションを次に示します（コンポーネントごとに異なる操作を行う必要がある場合）：

各コンポーネントで：

export class MyComponent implements OnInit {

firstLoad: boolean = true;

...

ngOnInit() {

  if(this.firstLoad) {
    window.scroll(0,0);
    this.firstLoad = false;
  }
  ...
}
1
0_tr0jan_0

私はAngularJSにあるようなこの問題に対する組み込みのソリューションを探し続けています。しかし、それまでこのソリューションは私にとってはうまくいきます。シンプルで、戻るボタンの機能を保持します。

app.component.html

<router-outlet (deactivate)="onDeactivate()"></router-outlet>

app.component.ts

onDeactivate() {
  document.body.scrollTop = 0;
  // Alternatively, you can scroll to top by using this other call:
  // window.scrollTo(0, 0)
}

zurfyx元の投稿 からの回答

1
Jared Whipple
export class AppComponent {
  constructor(private router: Router) {
    router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {
        window.scrollTo(0, 0);
      }
    });
  }

}
1
irhetoric