3

I am working on an angular project and I need to figure out a way to automatically scroll to the bottom of the page when the user clicks a button.

I tried doing this with the jQuery function animate() which didn't work for me. I have also tried the below function: 

scrollToBottom() {
  let myElement = document.getElementById("myPageId");
  myElement.scrollTop = myElement.scrollHeight;
}

This function only works when I call it from my html page, while I need to use it in my ts file when the user clicks a button.

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
w.braham
  • 43
  • 2
  • 2
  • 4
  • Look at this hopefully it will help https://stackoverflow.com/questions/35232731/angular2-scroll-to-bottom-chat-style – Noman Fareed Jun 12 '19 at 11:54

5 Answers5

4

create a button which executes this normal JavaScript as written by @chestas and also available here

relevant TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  goToBottom(){
    window.scrollTo(0,document.body.scrollHeight);
  }
}

relevant HTML:

<button type="button" (click)="goToBottom()">go to bottom </button>

complete stackblitz

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
  • 1
    wow.. super clean! Not sure why people are going for ElementRef and ViewChild for scrolling to bottom... This is definitely the solution for a functionality that scrolls the page down to the bottom. – Gel Oct 20 '21 at 20:09
1
<div style='...' #scrollMe [scrollTop]="scrollMe.scrollHeight">
  <p>
    #scrollMe [scrollTop]="scrollMe.scrollHeight //add in your div
  </p>
</div>
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Prince
  • 11
  • 2
  • 1
    [Please do not post an answer that consists essentially of code](https://stackoverflow.com/questions/how-to-answer). Please [edit] your answer to include an explanation of how and why the code solves the problem, when it should be used, what its limitations are, and if possible a link to relevant documentation. – ljmc Jan 07 '23 at 21:36
1

This code helped me

<div id="focusBtn"></div>

const element = document.getElementById("focusBtn");
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
Mukul Raghav
  • 349
  • 2
  • 5
0

look at the answer here Scroll Automatically to the Bottom of the Page here is the code, just add it inside your function scrollToBottom

window.scrollTo(0,document.body.scrollHeight);
chestas
  • 124
  • 1
  • 6
  • You should provide detailed answer not one-liner solution. check https://stackoverflow.com/help/how-to-answer – Abhijeet Jun 12 '19 at 12:56
0

I needed to scroll to the bottom of the page on load, but it didn't work since I am loading a lot of data from API. What worked for me is putting it inside setTimeout function to render the page first and then to scroll down.

ngOnInit() {
    this.scrollToButtom();
  }

scrollToButtom() {
    setTimeout(() => {
      window.scrollTo(0, document.body.scrollHeight);
    }, 500);
}
DBK
  • 1
  • 2