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

這是解決方案：

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

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

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

Answer 2

typescript/javascript 中的文檔 object 有一個名為“scrollIntoView”的 function，可用於滾動到特定元素。 在您的情況下，您可以創建一個函數，如下面的代碼片段所示：

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

希望這對你有幫助。 :-)

Answer 3

如果我理解正確，請更改以下部分：

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