Menu
In the HTML below I have a menu on the left side and a text in a div with overflow on the right hand side. The menu items on the left refer to anchor-links in the scrolling text. By clicking on a menu item, the scrolling text should jump to the corresponding anchor heading. That works but not exactly as I would like.
The point is this. Because of the fact that there is also a lot of “other text” there are 2 scrolling bars on this page: the first big scrolling bar for the whole page and the second small one for the overflowing div (with text1, 2, 3 and 4). If you click on “go to anchor 4”, the small scrolling bar moves, but the bigger one moves also a bit. My question is: is there a way to keep the big srolling bar high while moving the smaller scrolling bar down? Is it for example somehow possible with one command to direct two scrollbars?
This is the HTML I have:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=iso-8859-1″>
<meta name=”generator” content=”Adobe GoLive 4″>
<style type=”text/css”><!–
#layerheadtext { position: absolute; z-index: 15; top: 10px; left: 10px; visibility: visible }
#layermenu { position: absolute; top: 285px; left: 94px; width: 300px; visibility: visible }
#layertext2 { padding-right: 6%; position: absolute; top: 59px; left: 300px; width: 500px; height: 350px; visibility: visible; overflow-x: none; overflow-y: auto; }
#layertop2 { position: absolute; z-index: 15; top: 5px; left: 0px; visibility: visible }
#layerothertext { position: absolute; z-index: 16; top: 650px; left: 10px; visibility: visible }–>
</style>
</head>
<body>
<div id=”layerlarge”>
<div id=”layerheadtext”>
<div id=”layertop2″>
<h2>Cases</h2>
</div>
<div id=”layertext2″><a name=”top”></a>
<br>
<a name=”anchor1″></a><br>
<a href=”#top” onfocus=”this.blur();”><img src=”
<h3>Head 1</h3>
<div class=”tekst”>
Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. Text 1. <a name=”anchor2″></a><br>
</div>
<p><a href=”#top” onfocus=”this.blur();”><img src=”
<h3>Head 2</h3>
<div class=”tekst”>
Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. Text 2. <a name=”anchor3″></a><br>
</div>
<p><a href=”#top” onfocus=”this.blur();”><img src=”
<h3>Head 3</h3>
<div class=”tekst”>
Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. Text 3. <a name=”anchor4″></a><br>
</div>
<p><a href=”#top” onfocus=”this.blur();”><img src=”
<h3>Head 4</h3>
<div class=”tekst”>
Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4. Text 4.</div>
</div>
</div>
<div id=”layermenu”>
<a href=”#anchor1″ class=”link5″ onfocus=”this.blur();”>Go to Anchor 1</a><br>
<a href=”#anchor2″ class=”link5″ onfocus=”this.blur();”>Go to Anchor 2</a><br>
<a href=”#anchor3″ class=”link5″ onfocus=”this.blur();”>Go to Anchor 3</a><br>
<a href=”#anchor4″ class=”link5″ onfocus=”this.blur();”>Go to Anchor 4</a><br>
</div>
<div id=”layerothertext”>
Other Text Other Thext <br>
Other Text Other Thext <br>
Other Text Other Thext <br>
Other Text Other Thext <br>
Other Text Other Thext <br>
</div>
</div>
</body>
</html>