javascript - Scroll to top of the page with click in angular 8 - Stack Overflow

admin管理员组

文章数量:1292619

I have angular 8 application.

And I have navigation buttons for next and previous. But so I want to archieve that you will be navigate to top of the page when next is triggerd.

So I have this:

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

and ts file:

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 ponents
  @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 );
  }

But I don't get error. But also it is not navigating to top of page. IN this case the h4 heading.

So what I have to change?

Thank you.

I have angular 8 application.

And I have navigation buttons for next and previous. But so I want to archieve that you will be navigate to top of the page when next is triggerd.

So I have this:

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

and ts file:

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 ponents
  @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 );
  }

But I don't get error. But also it is not navigating to top of page. IN this case the h4 heading.

So what I have to change?

Thank you.

• javascript
• angular
• typescript

Share Improve this question Follow edited May 4, 2020 at 19:03 asked May 4, 2020 at 18:57 user13448251user13448251 5

• have you tried this ? stackoverflow./questions/44441089/… – pbachman Commented May 4, 2020 at 19:08
• wich one exactly? I don't see solution – user13448251 Commented May 4, 2020 at 19:11
• here is direct link stackoverflow./a/58684827/7302862, alternatively you can use ngx-page-scroll, i personally can remend this library. – pbachman Commented May 4, 2020 at 19:18
• This is not helping. It can work – user13448251 Commented May 4, 2020 at 19:32
• stackoverflow./a/75082608/3099784 – MAQ Commented Jan 11, 2023 at 11:54

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The document object in typescript/javascript, has a function called "scrollIntoView", which can be used to scroll to a specific element. In your case you could created a functions as seen on the snippet below:

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

Hope that was helpful to you. :-)

This is the solution:

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

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

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

If I understand you correctly, change the following section:

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

本文标签： javascriptScroll to top of the page with click in angular 8Stack Overflow