Div Scroll Position

Sometimes when creating scrollboxes, you might want the scrollbar to maintain its position when the user navigates away from, then returns to the page.

For example, say you have a link halfway down the scrollbox. The user clicks on the link - which opens a different webpage - then the user clicks the "Back" button to continue reading the rest of the contents of the scrollbox. When this happens with a normal scrollbox, the scrollbar will be back at the top of the scrollbox. In other words, the user will need to scroll back down to see the link they clicked on previously. This could become annoying, especially if there are many links. The code on this page overcomes this problem.

First, here's an example of what I mean.

Quick Example

The following code is basically what the above example uses. I've simplified it a little so that it's easier to understand. The only difference is that the above example uses functions for the JavaScript.

<body onload="document.getElementById('scrollBox').scrollTop = document.getElementById('scrollPosition').value;">
<input type="hidden" id="scrollPosition" />
<div id="scrollBox" style="overflow:scroll;height:100px;width:150px;" onscroll="javascript:document.getElementById('scrollPosition').value = this.scrollTop">
...content goes here...
...more content...
...link goes here...
</div>
</body>

The above code uses JavaScript combined with a hidden form field to remember the position of the scrollbar. The onload event handler is added to the <body> tag to trigger some JavaScript. This JavaScript sets the <div>'s scrollbar to the position that is held in the hidden form field (specified by using the <input> tag).

Adding JavaScript Functions

The following code includes the JavaScript functions. This is the same code that is used in the example.

<!DOCTYPE html>
<html>
<head>
<title>Div Scroll Position Example</title>
<script type="text/javascript">
<!--
function retrieveScrollPosition() {
    document.getElementById('scrollBox').scrollTop = document.getElementById('savedScrollPosition').value;
}

function setScrollPosition(userScrollPosition) {
	document.getElementById('savedScrollPosition').value = userScrollPosition
}
//-->
</script>
</head>
<body onload="retrieveScrollPosition();">
<h2>Remember Scroll Position</h2>
<p>This scrollbox will remember its scrollbar position when you return to the page.</p>

<input type="hidden" id="savedScrollPosition" />
<div id="scrollBox" style="overflow:scroll;height:100px;width:150px;border:1px solid #0ada0a;" onscroll="setScrollPosition(this.scrollTop);">
<p>Scroll down and click on the link. </p>
<p>Then from the destination page, click the Back button.</p>
<p>This scrollbox will load with the scrollbar in the same position that you left it.</p>
<p><a href="http://www.htmlcodes.ws/">HTML Codes</a></p>
<p>Go on... try it! </p>
</div>

<h2>Forget Scroll Position</h2>
<p>This scrollbox is a normal scrollbox. It will forget its scrollbar position when you return to the page. Therefore, the scrollbar will return to the top of the scrollbox when you return to the page. This is because it doesn't contain the same JavaScript code as the above scrollbox.</p>
<div style="overflow:scroll;height:100px;width:150px;border:1px solid #0ada0a;">
<p>Scroll down and click on the link. </p>
<p>Then from the destination page, click the Back button.</p>
<p>This scrollbox will load with the scrollbar back at the top position. This is because it does not have any special code to remember the scrollbar position.</p>
<p><a href="http://www.zappyhost.com/">ZappyHost web hosting</a></p>
<p>Go on... try it! </p>
</div>

<p><a href="/html/codes/div_scroll_position.cfm">Back to Div Scroll Position</a>.</p>
</body>
</html>

Multiple Scrollboxes

The above code is great if you only have one scrollbox. But if you have more than one scrollbox on your page, the code will need to be adjusted. Each scrollbox will need to have its own ID and hidden form field, and the JavaScript functions will need to recognize this and deal with it.

Here's an example of a page with more than one scrollbox. On that page, the code has been changed to cater for multiple scrollboxes.

And here's the code for that:

<!DOCTYPE html>
<html>
<head>
<title>Multiple Div Scroll Position Example</title>
<script type="text/javascript">
<!--
function retrieveScrollPositions() {
	var allScrollPositions = document.getElementsByClassName('savedScrollPosition');
		for(var i=1; i < allScrollPositions.length + 1; i++) { 
		 	document.getElementById('scrollBox' + i).scrollTop = document.getElementById('savedScrollPosition' + i).value;
		}
}

function setScrollPosition(userScrollPosition,whichBox) {
	document.getElementById('savedScrollPosition' + whichBox).value = userScrollPosition
}
//-->
</script>
</head>
<body onload="retrieveScrollPositions();">
<h2>Remember Scroll Position</h2>
<p>This scrollbox will remember its scrollbar position when you return to the page.</p>

<input type="hidden" class="savedScrollPosition" id="savedScrollPosition1" />
<div id="scrollBox1" style="overflow:scroll;height:100px;width:150px;border:1px solid #0ada0a;" onscroll="setScrollPosition(this.scrollTop,1);">
<p>Scroll down and click on the link. </p>
<p>Then from the destination page, click the Back button.</p>
<p>This scrollbox will load with the scrollbar in the same position that you left it.</p>
<p><a href="http://www.htmlcodes.ws/">HTML Codes</a></p>
<p>Go on... try it! </p>
</div>

<input type="hidden" class="savedScrollPosition" id="savedScrollPosition2" />
<div id="scrollBox2" style="overflow:scroll;height:100px;width:150px;border:1px solid #0ada0a;" onscroll="setScrollPosition(this.scrollTop,2);">
<p>Scroll down and click on the link. </p>
<p>Then from the destination page, click the Back button.</p>
<p>This scrollbox will load with the scrollbar in the same position that you left it.</p>
<p>Try this <a href="http://www.html.am/html-editors/online-html-editor.cfm">HTML Editor</a></p>
<p>Go on... try it! </p>
</div>

<input type="hidden" class="savedScrollPosition" id="savedScrollPosition3" />
<div id="scrollBox3" style="overflow:scroll;height:100px;width:150px;border:1px solid #0ada0a;" onscroll="setScrollPosition(this.scrollTop,3);">
<p>Scroll down and click on the link. </p>
<p>Then from the destination page, click the Back button.</p>
<p>This scrollbox will load with the scrollbar in the same position that you left it.</p>
<p>Have a <a href="http://www.great-workout.com/">Great Workout!</a></p>
<p>Go on... try it! </p>
</div>

<h2>Forget Scroll Position</h2>
<p>This scrollbox is a normal scrollbox. It will forget its scrollbar position when you return to the page. Therefore, the scrollbar will return to the top of the scrollbox when you return to the page. This is because it doesn't contain the same JavaScript code as the above scrollbox.</p>
<div style="overflow:scroll;height:100px;width:150px;border:1px solid #0ada0a;">
<p>Scroll down and click on the link. </p>
<p>Then from the destination page, click the Back button.</p>
<p>This scrollbox will load with the scrollbar back at the top position. This is because it does not have any special code to remember the scrollbar position.</p>
<p><a href="http://www.zappyhost.com/">ZappyHost web hosting</a></p>
<p>Go on... try it! </p>
</div>

<p><a href="/html/codes/div_scroll_position.cfm">Back to Div Scroll Position</a>.</p>
</body>
</html>