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


 
 

Share on Google+Share on Google+

JavaScript scrollIntoView() method

Advertisement
This method scrollIntoView() is supported by both Internet Explorer and Firefox and can be a very useful method while applying scrolling property to HTML page, div or frame.

JavaScript scrollIntoView() method

     

This method scrollIntoView() is supported by both Internet Explorer and Firefox and can be a very useful method while applying scrolling property to HTML page, div or frame. It scrolls the page, div or frame until the searching element is in the view.

Syntax :

 element.scrollIntoView( topalign);

 where topalign is a boolean value and is optional. If it is set to the value "true" it aligns the element with the top of scroll area and if it is "false" it aligns element with the bottom of scrolled area. By default if no value is provided then it automatically aligns element with the top of scrolled area by assuming topalign value to be true.

Note : To view scrollIntoView() method functionality we must apply the scrolling property of the element to be visible. 

Let's understand the use of scrollIntoView() method with an example :

In the following example we have created a button "Show RoseIndia" which calls the function  showRoseIndia() on the click event.

 function showRoseIndia(paraId)
 {
   var element = document.getElementById(paraId);
   element.scrollIntoView(true);
 }

We have passed the paragraph's id into the function showRoseIndia(), which is to be searched for view. Full HTML code is as given below :

<html>
 <head>
  <script type="text/javascript">
    function showRoseIndia(paraId)
    {
      var element = document.getElementById(paraId);
      element.scrollIntoView(true);
    }
  </script>
 </head>
<body>
<div style="background: #ff9900; width:'100%';"
    align="center">
  <font color="#0000ff" size="12pt">
    <b>scrollIntoView Example</b>
  </font>
 </div>
<div style="height: 100px; overflow: scroll;">
 <p>Rose India Technologies Pvt. Ltd.  is a global 
                 services company that ensures<br>
     maximum returns by providing quality software 
     solutions and services. The Indian<br>
     based company provides services to several 
     reputed institutional clients, in the<br>
     domain of IT and IT enabled Technologies.</p>
     <p id="roseindiaPara"><i><b>RoseIndia Technologies
     </b></i></p>
     <p> We help in understanding the client requirements
     and offer customized solutions<br>
     in various specialized areas like Web based Technologies,
     Database Systems, Client <br>
     Server Architecture, E-commerce Solutions and Consultancy
     Services. Other services <br> offered include Online Technical
     Tutorials, Content Development and Generation, Web <br>
     solutions for B2B, B2C, C2C and Travel portals, Web 
     Development, Promotion and Hosting, <br>
     and Applications Service Provider Solutions. With expertise 
     and skilled human resource, we<br>
     also provide assistance for offshore development of projects.
 </p>
</div> 
 <br>
 <input type="button" value="Show RoseIndia" 
    onclick='showRoseIndia("roseindiaPara");
    this.disabled="true"'>
</body>
</html>

Output :

Click on the button to show paragraph "RoseIndia Technologies".

You can see that it has scrolled the element <div> unless it finds the paragraph as specified.

Download Source Code

     

Advertisement

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 scrollIntoView() method   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
jitendra
August 26, 2011
scroll into view part of image on rubberbandZoom.

I want to scroll a div that contains image. i want to select part of image on mouse drag & dragged area in view.
jalakausha
November 2, 2012
hai

good
DMCA.com