How to scroll down on ngOnInit in angular?

Question

I want to scroll down to a section when the page loads in Angular on some condition.

Please note: I want to scroll down without clicking on anything(i.e, on ngOnInit).

I tried this: in my component.html file

<div #sectionSubscribe>
    HTML...
</div>

in my component.ts file

ngOnInit(){
    this.scrollToSubscribe(sectionSubscribe);
}
scrollToSubscribe($element){
    $element.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
        inline: 'nearest'
    });
}

But it doesn't allow me to do so. Please help

@PrashantPimpale Yes I tried but can't find anything. They all do it by clicking on button which I don't want. — Mohit Pandey, Dec 24 '19 at 09:53
Try this:https://stackoverflow.com/questions/39601026/angular-2-scroll-to-top-on-route-change — Prashant Pimpale, Dec 24 '19 at 10:01

Adrita Sharma · Accepted Answer · 2019-12-24T10:45:45.310

6

Try like this:

@ViewChild("sectionSubscribe", { static: true }) sectionSubscribeDiv: ElementRef;

scrollToSubscribe(){
    this.sectionSubscribeDiv.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });
}

Working Demo

edited Dec 24 '19 at 10:45

answered Dec 24 '19 at 10:21

Adrita Sharma

21,581
10
69
79

How to scroll down on ngOnInit in angular?

1 Answers1