Scroll Automatically to the Bottom of the Page

Scroll Automatically to the Bottom of the Page

Consider I have a list of questions. When I click on the first question, it should automatically take me to the bottom of the page.
For a matter of fact, I do know that this can be done using jQuery.
So, could you provide me with some documentation or some links where I can find answer to this question?
EDIT: Need to scroll to a particular HTML element at the bottom of the page


Solution 1:

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


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.


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:

If you want to scroll entire page to the bottom:

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

See the sample on JSFiddle

If you want to scroll an element to the bottom:

function gotoBottom(id){
   var element = document.getElementById(id);
   element.scrollTop = element.scrollHeight - element.clientHeight;

And that’s how it works:

enter image description here

Ref: scrollTop, scrollHeight, clientHeight

UPDATE: Latest versions of Chrome (61+) and Firefox does not support scrolling of body, see:

Solution 3:

Vanilla JS implementation:


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

Solution 6:

You can use this function wherever you need to call it:

function scroll_to(div){
   if (div.scrollTop < div.scrollHeight - div.clientHeight)
        div.scrollTop += 10; // move down

} ScrollTo