JavaScript scrollintoview

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

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: