PDA

View Full Version : How to move a div to an anchor with Scroll function?



kippie
Feb 5th, 2005, 12:33 PM
In the HTML below I use anchors and a sroll function. Now I would like to use the scroll function to scroll to a certain anchor. Is that possible at all? This is the HTML I have so far:

<!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: 150px; left: 20px; width: 200px; visibility: visible }
#layertext1 { padding-right: 6%; position: absolute; top: 59px; left: 300px; width: 200px; height: 300px; visibility: visible; overflow-x: none; overflow-y: auto; }
#layertext2 { padding-right: 6%; position: absolute; top: 59px; left: 500px; width: 200px; height: 300px; visibility: visible; overflow-x: none; overflow-y: auto; }
#layertop { position: absolute; z-index: 15; top: 5px; left: 0px; visibility: visible }
-->
</style>

<script language='javascript'>
function move_up1() {
layertext1.scrollTop = 0;
}
</script>

<script type="" language="JavaScript">

function Scroll() {
self.scrollTo(0, 0)
}

</script>

</head>

<body>
<div id="layerlarge">
<div id="layerheadtext">
<div id="layertop">
<h2>Cases</h2>
</div>

<div id="layertext1"><a name="top1"></a>
<br>
<a name="anchor11"></a><br>
<a href="#top" onfocus="this.blur();"><img src="http://www.inspirationtraining.nl/knoppen/pijl-omhoogopt.jpg" width="16" height="16" border="0" align="right"></a>
<h3>Head 11</h3>
Text 11. Text 11. Text 11. Text 11. Text 11. Text 11. Text 11. Text 11. Text 11. Text 11. Text 11. Text 11. Text 11. Text 11. Text 11<a name="anchor12"></a><br>
<p><a href="#top1" onfocus="this.blur();"><img src="http://www.inspirationtraining.nl/knoppen/pijl-omhoogopt.jpg" width="16" height="16" border="0" align="right"></a></p>
<h3>Head 12</h3>
Text 12. Text 12. Text 12. Text 12. Text 12. Text 12. Text 12. Text 12. Text 12. Text 12. Text 12. Text 12. Text 12. Text 12. Text 12. <a name="anchor13"></a><br>
<p><a href="#top1" onfocus="this.blur();"><img src="http://www.inspirationtraining.nl/knoppen/pijl-omhoogopt.jpg" width="16" height="16" border="0" align="right"></a></p>
<h3>Head 13</h3>
Text 13. Text 13. Text 13. Text 13. Text 13. Text 13. Text 13. Text 13. Text 13. Text 13. Text 13. Text 13. Text 13. Text 13. Text 13. Text 3. <a name="anchor14"></a><br>
<p><a href="#top1" onfocus="this.blur();"><img src="http://www.inspirationtraining.nl/knoppen/pijl-omhoogopt.jpg" width="16" height="16" border="0" align="right"></a></p>
<h3>Head 14</h3>
Text 14. Text 14. Text 14. Text 14. Text 14. Text 14. Text 14. Text 14. Text 14. Text 14. Text 14. Text 14. Text 14. Text 14. Text 14. Text 14.
</div>

</div>
<div id="layermenu">
<a href="#anchor11" class="link5" onfocus="this.blur();">Move Layertext1 to Anchor 11</a><br>
<a href="#anchor12" class="link5" onfocus="this.blur();">Move Layertext1 to Anchor 12</a><br>
<a href="#anchor13" class="link5" onfocus="this.blur();">Move Layertext1 to Anchor 13</a><br>
<a href="#anchor14" class="link5" onfocus="this.blur();">Move Layertext1 to Anchor 14</a><br><br>
<br>
<a href='javascript:move_up1()'>Move Layertext1 UP to 0</a><br>
<a href='javascript:Scroll()'>How to move Layertext1 to Anchor1 with Scroll function?</a><br>
</div>

</div>
</body>

</html>

Mr J
Feb 5th, 2005, 04:41 PM
Please try the following example, it may be of help to you



<script language="javaScript">
<!--
function go_anchor(n){
document.getElementById("div1").scrollTop = document.getElementById(n).offsetTop
}
// -->
</script>

<DIV id="div1" style="position:absolute; left:200px; top:100px; width:330px; height:180px;overflow:auto; padding:5px;border:2px solid #000000">

<span id="sp1">Anchor 1</span>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<span id="sp2">Anchor 2</span>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<span id="sp3">Anchor 3</span>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<span id="sp4">Anchor 4</span>

</DIV>

<a href="#null" onclick="go_anchor('sp1')">To anchor 1</a>
<a href="#null" onclick="go_anchor('sp2')">To anchor 2</a>
<a href="#null" onclick="go_anchor('sp3')">To anchor 3</a>
<a href="#null" onclick="go_anchor('sp4')">To anchor 4</a>

kippie
Feb 5th, 2005, 09:10 PM
Thanks Mr. J. This is exactly what I was looking for! Thanks

sd60555
Feb 28th, 2005, 06:21 PM
This was great information - thanks for posting!

I have used your suggestion and while it works in Safari and Firefox, it doesn't seem to work in IE. Any thoughts?

Here is the page I have used your code:
http://www.hatecrimemovie.com/news.html

Mr J
Feb 28th, 2005, 10:46 PM
sd60555

Just tried the page at your link and scrolled to the anchors ok in my IE6

sd60555
Feb 28th, 2005, 11:36 PM
You're right - I tried it on a PC and it works. Just isn't working in IE 5.2.3 for Macs. Oh well, can't have it all.

Thanks for looking at it!

Mr J
Mar 1st, 2005, 11:25 AM
If you find a solution for the Mac would you post it here :thumbsup: