Scroll Automatically to the Bottom of the Page

javascript jquery scroll scrollto js-scrollintoview

1,007,388

Solution 1

jQuery isn't necessary. Most of the top results I got from a Google search gave me this answer:

window.scrollTo(0, document.body.scrollHeight);

Where you have nested elements, the document might not scroll. In this case, you need to target the element that scrolls and use it's scroll height instead.

window.scrollTo(0, document.querySelector(".scrollingContainer").scrollHeight);

You can tie that to the onclick event of your question (i.e. <div onclick="ScrollToBottom()" ...).

Some additional sources you can take a look at:

Solution 2

To scroll entire page to the bottom:

const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

You can view the demo here

To scroll a specific element to the bottom:

const scrollToBottom = (id) => {
    const element = document.getElementById(id);
    element.scrollTop = element.scrollHeight;
}

Here is the demo

And here's how it works:

Ref: scrollTop, scrollHeight, clientHeight

UPDATE: Latest versions of Chrome (61+) and Firefox does not support scrolling of body, see: https://dev.opera.com/articles/fixing-the-scrolltop-bug/

Solution 3

Vanilla JS implementation:

element.scrollIntoView(false);

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

Solution 4

You can use this to go down the page in an animation format.

$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");

Solution 5

Below should be the cross browser solution. It has been tested on Chrome, Firefox, Safari and IE11

window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

window.scrollTo(0,document.body.scrollHeight); doesn't work on Firefox, at least for Firefox 37.0.2

View more solutions

1,007,388

Author by

jat

Updated on July 08, 2022

Comments

jat almost 2 years

I have a list of questions. When I click on the first question, it should automatically take me to a specific element at the bottom of the page.

How can I do this with jQuery?
alexoviedo999 over 9 years

with jQuery $('#id')[0].scrollIntoView(false);
tim-we almost 9 years

at the moment it's Firefox only though
Esamo over 8 years

Didn't work for me. I did this: element.scrollTop = element.scrollHeight.
Tho over 8 years

The solution works with Chrome, Firefox, Safari and IE8+. Check out this link for more detail quirksmode.org/dom/w3c_cssom.html
Matt Zukowski about 8 years

Works in newer versions of Chrome now, but some of the extra options (like smooth scrolling) don't seem to be implemented yet.
corgrath about 8 years

May 4, 2016: Please note that that the "scrollTo" function is experimental and does not work in all browsers.
Kyle Baker over 7 years

For me, document.getElementById('copyright').scrollTop += 10 doesn't work (in latest Chrome)... remains zero...
user3655574 about 7 years

scrollto did not work on my browser, I came across this link below stackoverflow.com/questions/8917921/… which is very useful because the solutions work across the browsers I tried.
heman123 almost 7 years

This did not for for me because it changes url and then my angular app redirects to something else!
Nisba about 6 years

I added an empty div at the end of the page and used the id of that div. Worked perfectly.
David Avsajanishvili about 6 years

@luochenhuan, I've just fixed the sample code by using "document.scrollingElement" instead of "document.body", see above
blalond almost 6 years

Even better: element.scrollIntoView({behavior: "smooth"});
nobjta_9x_tq almost 6 years

let size = ($("div[class*='card-inserted']")).length; ($("div[class*='card-inserted']"))[size -1].scrollIntoView();
JorgeMadson over 5 years

This should be the right answer! Worked on my ionic 1 app
zb226 over 5 years

It does work in Firefox 62.0.3, but I've got no clue when they fixed that.
mPrinC over 5 years

for a separate element, this is working solution: document.querySelector(".scrollingContainer").scrollTo(0,doc‌ument.querySelector(‌".scrollingContainer‌").scrollHeight);
Skoua almost 5 years

{behavior: "smooth"} isn't very well supported as of 2019 but that's a good and native answer. caniuse.com/#feat=scrollintoview
nonopolarity over 4 years

this answer only works if you add an empty element to end of page? Then isn't theelement.scrollTop = element.scrollHeight - element.clientHeight answer not needing that?
Trever Thompson about 4 years

May have to set html, body height to 100% to scroll to bottom
Dan Dascalescu almost 4 years

LOL "worked". What if the document is longer than 9999?
Dan Dascalescu almost 4 years

What... is even going on there? Care you explain your solution? Code-only answers are discouraged.
Dan Dascalescu almost 4 years

This is not simple, and requires creating a scroll element.
Liam almost 4 years

@DanDascalescu You're right! but my code works I don't think it deserves down vote
Andrew almost 4 years

@DanDascalescu 99999
Dan Dascalescu almost 4 years

"Works" is not enough. All solutions on this page "work" to some extent. And there's a ton of them. How should a reader decide?
KBeDev over 3 years

This should work too: objectSelector.scrollTo({ top: objectSelector.scrollHeight }). Understanding that objectSelector is the element returned by document.getElementById. PD: adding behavior: 'smooth' in the scrollTo method options set up a predefined scrolling animation.
Brendon Muir over 3 years

What if the document is longer than 99999?!
Rabby over 3 years

The last one using jquery is work for me Thanks @Zhihao
nviens over 3 years

@BrendonMuir If the document is longer than 99999 you can define a javascript variable above the javascript code in the answer that gets the dynamic height of the document and use that variable instead of the hard coded 99999
Brendon Muir over 3 years

Sorry @nviens, I was just being silly, following on from DanDascalescu :D
Akanksha Mohanty over 3 years

window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); - The scroll is not smooth. How will make the scrolling smooth @PixelsTech
Akanksha Mohanty over 3 years

This solution doesn't work in IE. Is there any workout that we can add to make this work in IE as well.
barsawi13 over 3 years

window.scrollTo(0,document.body.scrollHeight); // didn't work window.scrollTo({top:document.body.scrollHeight}); // work and did the trick
Konard about 3 years

@nobjta_9x_tq this will work only if the page is loaded up to the end.
maazakn almost 3 years

You can add options to scrolling
ashleedawg over 2 years

In many cases even JavaScript isn't necessary to keep a container bottom-scrolled.
Dshiz over 2 years

Thank you - This was the answer that worked for me after searching for days.
MAD about 2 years

One of the referred link is broken. Adding the correct linkl. stackstalk.com/2010/07/javascript-scroll-to-bottom-of-page.h‌tml
Marcio Duarte about 2 years

Be aware that this will create a disconnect between the visual presentation and DOM order when using multiple elements – like paragraphs – to display the text, which will negatively affect users using screen readers. This type of user will not have access to the correct reading order.
Meet Gondaliya almost 2 years

hey, I cant scroll all the way to the bottom. It stucks at a particukar postion and can go beyond that. Why is this happening?