Window scrollBy() Method - Javascript Browser Object Model

Javascript examples for Browser Object Model:Window scrollBy

  1. HOME
  2. Javascript
  3. Browser Object Model
  4. Window scrollBy

Description

The scrollBy() method scrolls the document by the specified number of pixels.

Parameter Values

Parameter Type Description
xnum Number Required. pixels to scroll along the x-axis. Both positive / negative are allowed
ynum Number Required. pixels to scroll along the y-axis. Both positive / negative are allowed

Return Value:

No return value

The following code shows how to Scroll the document by 100px horizontally:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
body {/* ww  w  . ja va2 s . c o m*/
    height: 7500px;
    width: 5000px;
}

button {
    position: fixed;
}
</style>
</head>
<body>

<button onclick="scrollWin(0, 50)">Scroll down</button><br><br>

<button onclick="scrollWin(0, -50)">Scroll up</button><br><br>

<button onclick="scrollWin(100, 0)">Scroll right</button><br><br>

<button onclick="scrollWin(-100, 0)">Scroll left</button><br><br>

<script>
function scrollWin(x, y) {
    window.scrollBy(x, y);
}
</script>

</body>
</html>

Related Tutorials