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

Solutions/Answers:

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:

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: 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

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

}

jquery.com: ScrollTo