This example is using an iframe with its size set at 600 X 350 pixels.

A table is used in the page loaded into the iframe to create a main container with its width set to 3000px and height set to 350px.

TD cells are used to create content areas the same size as the iframe

The total width of all the td cells should not exceed the width of the table

You may have to take into account any padding, margins, and borders that are applied.

For this example I have used the following:

td width = 600
Number of cells = 5

Therefore the table width is 600 * 5 = 3000px

The contents of a td cell should not exceed the height of the main container otherwise the overflow will not be seen.

Providing you do the maths correctly you can have any number of td cells

The script is coded into the parent page but the links in the parent page are written by the page in the iframe, this is to ensure that if muliple pages are used with a different number of sub containers the number of links will correspond.

Iframe page example code

function createLinks(){
parent.document.getElementById("iframelinks").innerHTML='<a href="#null" onclick="scrollToDiv(\'cell1\')">Cell 1</a> '
+'<a href="#null" onclick="scrollToDiv(\'cell2\')">Cell 2</a> '
+'<a href="#null" onclick="scrollToDiv(\'cell3\')">Cell 3</a> '
+'<a href="#null" onclick="scrollToDiv(\'cell4\')">Cell 4</a> '
+'<a href="#null" onclick="scrollToDiv(\'cell5\')">Cell 5</a> '
}

Each link must correspond to the relative cell id

<div id="cell1">
Contents
</div>

Links can also be used in iframe page, if required

<a href="#null" onclick="parent.scrollToDiv('cell1')">Cell 1</a>

Note the reference to the parent in the link.