Home Javascript JavaScript scrollTo() method
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

JavaScript scrollTo() method

Advertisement
This method of JavaScript scrolls content of the window to the specified coordinate position.

JavaScript scrollTo() method

     

This method of JavaScript scrolls content of the window to the specified coordinate position. Syntax for scrollTo() method is as follows:

Syntax :

 window.scrollTo( xValue, yValue) ;

Where xValue and yValue are the parameters which represents x-axis coordinate position and y-axis coordinate position.

Description of code:

Let's understand the use of scrollTo() method with a simple example. In this example we have created a simple HTML page which have two input boxes for taking inputs by the user. These text boxes takes the X-axis coordinate position and Y-axis coordinate position. These values would be passed to the scrollTo() method.

Here we have created one button "Scroll to given position" which calls function "scrollToWindow()" on click event. The function scrollToWindow() is defined in the JavaScript written between the <script></script> tags.

  function scrollToWindow()
  {
   var xpos= document.getElementById('txtXpos').value;
   var ypos= document.getElementById('txtYpos').value;
   alert("Scroll to X-"+xpos+" and Y-"+ypos);
   window.scrollTo(xpos,ypos);
  }

In above lines of code, first two lines of function defined two variables xpos and ypos. These variables holds the value taken as input for the text boxes "txtXpos" and "txtYpos". In third line we have called the alert() method and the final and fourth line calls the scrollTo() method by the window reference object. Here is the full HTML code as follows :

<html>
<head>
<script language="JavaScript">
function scrollToWindow()
  {
  var xpos= document.getElementById('txtXpos').value;
   var ypos= document.getElementById('txtYpos').value;
   alert("Scroll to X-"+xpos+" and Y-"+ypos);
  window.scrollTo(xpos,ypos);
  }
</script>
</head>
<body>
<div style="background: #ff9900; width:'100%';"
    align="center">
  <font color="#0000ff" size="12pt">
	<b>scrollTo Example</b>
  </font>
 </div>
<br>Rose<br>India<br>Technologies<br>Pvt.<br>Ltd.<br>
   <br><hr>
    <p>X-axis <input type="text" id="txtXpos" /></p>
	<p>Y-axis <input type="text" id="txtYpos" />
     </p>
<input type="button" onclick="scrollToWindow()" 
    value="Scroll to given position" />
<hr><br><br>
</body>
</html>

Output :

Input X-axis and Y-axis position into input boxes into input text box.

Suppose we have provided the position 10,10 then it will scroll window to the (X,Y) position i.e (10,10).

By clicking on the button "Scroll to given position" it will scroll to the specified position.

If we enter X-axis and Y-axis values to 50,50

it will scroll the window to the position (50,50)

Download Source Code

     

Advertisements

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: February 7, 2009

Ask Questions?    Discuss: JavaScript scrollTo() method  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
vitor
February 29, 2012
Great

nice work, thanks.
Cornelis
April 24, 2012
scrollto()

how would it work if i would want to scroll to a certain anchor in my html page
ANAND PULAKALA
June 20, 2012
Please tell me cursor events.

please tell me cursor events
http://www.shubhbanhd.com
December 6, 2012
need help for scrole position

can anybody help me to find out scrollbar current position, thing is that i want to move one image with scrillbar.
DMCA.com