Javascript Browser Window scrollBy() Method

Introduction

Scroll the document by 100px horizontally: 

window.scrollBy(100, 0); // Scroll 100px to the right

Click the button to scroll the document window by 100px horizontally.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
body {/*from  w  ww .j  a v  a  2 s.  co  m*/
  width: 5000px;
}

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

<button onclick="scrollWin()">Click me to scroll horizontally!</button><br><br>

<script>
function scrollWin() {
  window.scrollBy(100, 0);
}
</script>

</body>
</html>

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

For this method to work, the visible property of the window's scrollbar must be set to true! 

scrollBy(xnum, ynum);

Parameter Values

Parameter
 Type
 Description
xnum


 Number Required.
pixels to scroll by, along the x-axis.
Positive values will scroll to the right, and negative values will scroll to the left
ynum


 Number Required.
pixels to scroll by, along the y-axis.
Positive values will scroll down, and negative values scroll up



PreviousNext

Related