JavaScript scrollBy() method
JavaScript method scrollBy() can be used to scroll window by the
provided number of pixels. One most important thing here to notice is that it
can scroll windows only if the scrolling property is visible. If scrolling
property would not be visible it would not be applied.
Syntax :
| window.scrollBy( xAxis, yAxis) ; |
where xAxis specifies the number of pixels window is to be scrolled
along X-axis and yAxis specifies the number of pixels window is to be
scrolled along Y-axis and both of these arguments are required.
Description of code:
To illustrate the use of scrollBy() method, we have created a simple
example which will scroll window by the 100, 100 pixels position on the X-axis
and Y-axis both. Here in HTML page we have created a button "Scroll"
which calls the function scrollWindow() when clicked. In this
function we have called the scrollBy() method with the window object.
function scrollWindow()
{
window.scrollBy(100,100);
}
|
Here is the full HTML code for scrollBymethod.html as follows :
<html>
<head>
<script language="JavaScript">
function scrollWindow()
{
window.scrollBy(100,100);
}
</script>
</head>
<body>
<div style="background: #ff9900; width:'100%';"
align="center">
<font color="#0000ff" size="12pt">
<b>scrollby Example</b>
</font>
</div>
<br>Rose<br>India<br>Technologies<br>Pvt.<br>Ltd.<br>
<br><br>
<input type="button" onclick="scrollWindow()"
value="Scroll" />
<br><br><br><br><br><br><br><br>
</body>
</html>
|
Output :
Click on the "Scroll" button to scroll window upward with
the 100 pixels on X-axis and 100 pixels on Y-axis.
You can see that it has scrolled the window with the X-axis and Y-axis
positions provided into scrollBy() method.
You can also download the full source code by the following link.
Download Source Code
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
