Window scrollBy() method

Definition and usage

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

Tip:To make scrollBy() The method takes effect when the document is larger than the screen, and the scrollbar must be visible.

See also:

scrollTo() method

Instance

Example 1

Scroll the document horizontally 100px:

window.scrollBy(100, 0);

Try it yourself

Example 2

Scroll the document vertically 100px:

window.scrollBy(0, 100);

Try it yourself

Example 3

Scroll up and down in the document:

<button onclick="scrollWin(0, 50)">Scroll down</button>
<button onclick="scrollWin(0, -50)">Scroll up</button>
<script>
function scrollWin(x, y) {
  window.scrollBy(x, y);
}
</script>

Try it yourself

Example 4

Scroll left and right in the document:

<button onclick="scrollWin(100, 0)">Scroll right</button>
<button onclick="scrollWin(-100, 0)">Scroll left</button>
<script>
function scrollWin(x, y) {
  window.scrollBy(x, y);
}
</script>

Try it yourself

Syntax

window.scrollBy(x, y)

or:

scrollBy(x, y)

Parameter

Parameter Description
x

Required. The number of pixels to scroll (horizontal).

The positive value scrolls to the right, and the negative value scrolls to the left.
y

Required. The number of pixels to scroll (vertically).

Positive values scroll down, negative values scroll up.

Return Value

None.

Browser Support

All Browsers Support scrollBy():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support