Scrolling div with Javascript

March 5, 2007

You can scroll div with javascript. You need to have one mainContainer which will contain the child for it. eg.

I will have mainArea div with child div myReport.

<div id=”mainArea”>
<div id=”myReport”>

</div>
</div>

You need to fixed the height for the mainArea div with style

<div id=”mainArea” style=”height:400px;overflow:auto”>
<div id=”myReport”>

</div>
</div>

Now your div can scroll, You now need to write one line code in any javascript function

function scrollMainArea()
{
document.getElementById(“mainArea”).scrollTop = 0;
}

This will move your myReport div to show the top portion of your division.

I am using this codes in my chat application to scroll the messages automatically.