StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can use jQuery's scrollTop() to adjust the scroll vertical scroll bar.</p> <p>For instance if your button to scroll down has an id of <code>scrollDownButton</code> and you want to scroll down the page by 100px then the following code will do that. </p> <pre><code>$('#scrollDownButton').click( function() { var currPosition = $('body').scrollTop(); $('body').scrollTop(currPosition + 10); }); </code></pre> <p><code>scrollTop()</code> will give you the current position of the vertical scroll bar and <code>scrollTop(value)</code> will set it to the given position.</p> <p>If you want to scroll up the page then subtract from the current value rather than add.</p> <p><strong>Note:</strong> You want to select whichever element has the scroll bar. In the above example it was the <code><body></code>, but <code><html></code> is also a common element. Also scrollTop() was implemented in JQuery 1.2.6 make sure your version is new enough.</p> <p><strong>Update: How to animate the scroll.</strong></p> <p>If you want to animate the scroll and see it happen rather than just jump down or up you can use the following code:</p> <pre><code>$('#scrollDownButton').click( function() { var currPosition = $('body').scrollTop(); $('body').animate({scrollTop: currPosition+100}, 'slow'); }) </code></pre> <p><strong>Update for Ryan</strong></p> <p>Here is the code for your specific page. </p> <pre><code>$('document').ready( function() { $('#scrollDownButton').click( function() { var currPosition = $('html').scrollTop(); $('html').animate({scrollTop: currPosition+100}, 'slow'); }); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload