Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scroll Automatically to the Bottom of the Page

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?

like image 298
jat Avatar asked Jul 30 '12 05:07

jat


People also ask

How do I automatically scroll to the bottom of the page?

To use you just need to press CTRL+ Left click of your mouse and drag the mouse a bit in the direction you want to scroll the page. For example, if you want to scroll up to the page automatically, click CTRL+ left click and slightly move your mouse upwards, the tool will start scrolling up the page.

How do I auto scroll to the bottom in HTML?

To auto scroll a page from top to bottom we can use scrollTop() and height() method in jquery. In this method pass the document's height in scrollTop method to scroll.

How do you scroll to the end of a page in JavaScript?

And if you are in browser's javascript console, it might be useful to be able to stop the scrolling, so add: var stopScroll = function() { clearInterval(scrollInterval); }; And then use stopScroll(); . @nobjta_9x_tq this will work only if the page is loaded up to the end.

How do I make a div scroll to the bottom?

Use element. scrollintoview() to Scroll to Bottom of Div in JavaScript. The Element.


1 Answers

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:

  • http://www.sourcetricks.com/2010/07/javascript-scroll-to-bottom-of-page.html
  • http://www.alecjacobson.com/weblog/?p=753
  • http://www.mediacollege.com/internet/javascript/page/scroll.html
  • http://www.electrictoolbox.com/jquery-scroll-bottom/
like image 56
Zhihao Avatar answered Oct 01 '22 21:10

Zhihao