scrollTop not working after adding ngAfterViewChecked

Question

I need to add MovetoTop and MovetoBottom buttons.

Also I need automatically MovetoBottom when the page is loading.

Code is not working.(Only scrollToBottom function works, scrollToTop function does not works) after calling the scrollToBottom function ngAfterViewChecked.

Please help

Here I am sharing my code.

Typescript

import { Component, OnInit, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
import { Router  } from '@angular/router';

@Component({
  selector: 'app-review',
  templateUrl: './review.component.html',
  styleUrls: ['./review.component.scss']
})
export class ReviewComponent implements OnInit  {
  @ViewChild('scrollMe', { read: ElementRef }) public scroll: ElementRef;




  ngAfterViewChecked() {        
     this.scrollToBottom();        
  }

  public scrollToBottom() {
    console.log(this.scroll.nativeElement.scrollTop);
    this.scroll.nativeElement.scrollTop = this.scroll.nativeElement.scrollHeight;

  }

  public scrollToTop() {
    this.scroll.nativeElement.scrollTop = 0;
  }


}

HTML

<div #scrollMe style="overflow: scroll; overflow-x: hidden;height:100%;">
 Hai
</div>

`i need add to top, add to bottom buttons also i need automatically move to bottom when the page loading`. This statement is confusing . — Wasim, Jul 01 '20 at 12:06
Check [this](https://stackoverflow.com/questions/51110923/how-to-scroll-the-list-to-top-on-button-click-in-angular) if something works for you — Wasim, Jul 01 '20 at 12:40

score 0 · Accepted Answer · answered Jul 01 '20 at 12:53

0

Try this in scrollToTop() function..

public scrollToTop() {
  this.scroll.nativeElement.scrollTop(0);
}

answered Jul 01 '20 at 12:53

Rohit Tagadiya

3,373
1
25
25

scrollTop not working after adding ngAfterViewChecked

1 Answers1