Прокрутите страницу вверх, нажав angular 8.

Question

У меня есть angular 8 приложение.

И у меня есть кнопки навигации для следующего и предыдущего. Но я хочу заархивировать, что вы перейдете к началу страницы, когда будет запущено следующее.

Итак, у меня есть следующее:

 <h4 id="heading"  #goUp class="echeq-title">{{ currentEcheqPage.title }}</h4>

и файл ts:

export class EcheqPageComponent implements OnInit, AfterViewInit {

  @Input() currentEcheqPage: EcheqPage;
  @Input() currentEcheqPager: EcheqPager;
  @ViewChild('goUp', {static: false}) contentPage: ElementRef;

  // We use template variables to query the components
  @ViewChildren('echeqElement') elementComponents: QueryList<EcheqElementComponent>;

  EcheqElement = EcheqElement;
  elementsChanged = true;
  container: HTMLElement;

  constructor( private echeqService: EcheqService ) { }

  ngOnInit() {
    // document.getElementById ('heading').scrollIntoView();
  }

  ngAfterViewInit(): void { 
    this.showUp();

  }
}

private showUp(): void {
    this.contentPage.nativeElement.scrollTo( 0, 0 );
  }

Но я не получаю ошибку. Но также это не навигация к началу страницы. В данном случае заголовок h4.

Так что мне нужно изменить?

Спасибо.

Answer 1

Если я вас правильно понимаю, измените следующий раздел:

 private showUp(): void {
    window.scroll(0,0);
  }

Answer 2

Это решение:

  @ViewChild('goUp', { static: true }) contentPage: ElementRef;

 ngOnChanges(): void {
   this.showUp();
  }

  showUp() {
     this.contentPage.nativeElement.scrollIntoView();
  }

Answer 3

Объект документа в typScript / javascript имеет функцию scrollIntoView, которую можно использовать для прокрутки к указанному c элементу. В вашем случае вы могли бы создать функции, как показано во фрагменте ниже:

showUp() {
    const element = document.querySelector('#goUp');
    element.scrollIntoView();
}

Надеюсь, что это было полезно для вас. :-)