/

HTML / CSS / JavaScript Tutorial

JavaScript Window method: scroll()

[this page | pdf | back links]

The scroll() method (when applied to Window objects in the JavaScript BOM) scrolls the document to specified coordinates. It is depreciated (replaced by the scrollTo() method)

 

It has the following syntax with the following parameters. It does not return a value.

 

window.scroll(x, y)

 

Parameter

Required / Optional

Description

x

Required

Number of pixels to scroll to, along horizontal axis

y

Required

Number of pixels to scroll to, along vertical axis

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
<button onclick="myOpen()">Open a new window</button><br>
<button onclick="myResizeBy()">Resize newly opened window: resizeBy(100,50)</button><br>
<button onclick="myResizeTo()">Resize newly opened window: resizeBy(400,400)</button><br>
<button onclick="myMoveBy()">Move newly opened window: moveBy(100,60)</button><br>
<button onclick="myMoveTo()">Move newly opened window: moveBy(300,350)</button><br>
<button onclick="myScroll()">Scroll newly opened window: scroll(80,20) [depreciated]</button><br>
<button onclick="myScrollBy()">Scroll newly opened window: scrollBy(30,60)</button><br>
<button onclick="myScrollTo()">Scroll newly opened window: scrollTo(70,30)</button><br>
<button onclick="myClose()">Close newly opened window</button>

<script>
var x;

function myOpen() {
  x = window.open("","newWindow", "width=300, height=300");
  x.document.write("<h3>Text in a new window - Long enough that window is likely to trigger scrolling, or adjust size to do so</h3>" +
    "Note: many of these functions seem to be supported only non-intuitives by some browsers<br>" +
    "1<br>2<br>3<br>4<br>5<br>6<br>7<br>" +
    "8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br><h4>End</h4>");
}

function myResizeBy() { x.resizeBy(100, 50); }
function myResizeTo() { x.resizeTo(400, 400); }
function myMoveBy() { x.moveBy(100, 60); }
function myMoveTo() { x.moveTo(300, 350); }
function myScroll() { x.Scroll(80, 20); }
function myScrollBy() { x.ScrollBy(30, 60); }
function myScrollTo() { x.scrollTo(70, 30); }
function myClose() { x.close(); }
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedJavaScriptMethodWindowScroll() {
  return !!window.scroll;
}


NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)


Desktop view | Switch to Mobile