Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Javascript JavaScript scrollintoview

Related Tutorials


 
 

Share on Google+Share on Google+

JavaScript scrollintoview

Advertisement
Here we will create an example of JavaScript scrollIntoView() method that scrolls the page up and down to view the complete element of a page.

JavaScript scrollIntoView() method is used to apply scrolling property to HTML page, div or frame. It scrolls the page to view the complete element. To view scrollIntoView() method functionality, we must set the scrolling property be visible. Scroll bar is supported by all web browser.

Syntax:

element.scrollIntoView( topalign);

where topalign is a boolean value and is optional. When set to "true" it aligns the element with the top of scroll area and when it is "false" it aligns element with the bottom of scrolled area. By default it automatically aligns element with the top of scrolled area.

Here is an example of scrollIntoView() method. 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);
}

HTML code is 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>

Resource:

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



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: October 7, 2013

Related Tutorials

Discuss: JavaScript scrollintoview  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com