How to scroll to the bottom of the page in a mobile device

Question

I'm trying to scroll down to the bottom of the page when a new message is received or sent, I have everything set up and it's working fine on my laptop but when I try accessing my website on a mobile device the scroll event is not working.

Well I have used both of jQuery scroll, and pure javascript scroll but none of them worked on the mobile device

Here are all the functions that I used which I found all across the internet:

//first method
window.scrollTo(0,document.body.scrollHeight);

//second method
$("html,body").animate({
    scrollTop: $(document).height()
}, "slow");

//third method
$('my-messages-container').animate({ scrollTop : $(document).height()+1000000 });

well, the code is working fine when I use the developer tools mobile simulation. but when I try it on a real mobile device it doesn't work.

When the user clicks on the send button , a function is called do some stuff and then comes one of these methods — FiAi, Jun 11 '19 at 15:52

score 1 · Answer 1 · answered Jan 07 '21 at 20:09

1

elementAtBottomOfPage.scrollIntoView()

Is what finally ended up working for me, on iOS.

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

answered Jan 07 '21 at 20:09

Ronald C

171
6

score -1 · Answer 2 · answered Jun 11 '19 at 15:51

-1

As stated on: jQuery Scroll To bottom of the page

$("html, body").animate({scrollTop: $(document).height()-$(window).height()});

Would get you to the bottom of the page.

answered Jun 11 '19 at 15:51

Findegil

82
3

3

i know and it works fine on a web browser but on a mobile device it dosen't. – FiAi Jun 11 '19 at 15:56

How to scroll to the bottom of the page in a mobile device

2 Answers2