CancelImage Upload

How to scroll down a specific number of pixels with JavaScript

In JavaScript there are two types of scroll functions. One is scrollTo, which takes a user to a specified set of page coordinates. The other is scrollBy(), which is far more handy for dynamic web pages where the scrollTo coordinates might have changed.

As per usual with locations we have both horizontal and vertical coordinates that can be specified. In most cases the x (horizontal) coordinate can be left set to 0. That is unless you have a site that breaks the traditional mould, and employs a horizontal scroll bar.

The y coordinates then are the ones that we will be interested in. The following example for instance will take us down 500 Pixels from our usually location. Not that the function scrollBy(x, y), placed after the window object, is the key to this outcome:

<html>
<head>
<title>How to scroll down a specific number of pixels with JavaScript</title>
<script type="text/javascript">
function scrollByPixels(x, y)
{

      window.scrollBy(x, y);

}
</script>
</head>
<body>

<input type="button" onclick="javascript:scrollByPixels(0, 500)" value="Scroll down 500px">

<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>


Login
Want to leave a comment?

No problem. Just enter your email and password below.


register | home | reminder

From Manu LesPaul at 16:52:25 on the 04/12/2010.
I'm new to scripting, and I was wondering how could you scroll down using a keycode of the keyboard instead of a button ?
myDesignTool Networking • www.mydesigntool.cominfo@mydesigntool.com