PDA

View Full Version : scrolling to a div?



freshfan
02-01-2010, 03:34 AM
+++


is it possible to scroll / jump to say, 10px above a div? i tried adding padding, but it doesn't work.


also, when I use <a href="#xxxx">, is it possible to prevent the browser from adding #xxxx to the url in the browser?

thanks!!!

+++

Old Pedant
02-01-2010, 07:09 AM
Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<style type="text/css">
div#zamboni {
position: relative;
width: 30%;
border: solid blue 3px;
background-color: lightblue;
padding: 10px;
font-size: medium;
}
div#rowrbazzle {
position: relative;
width: 50%;
border: solid red 3px;
background-color: pink;
padding: 40px;
font-size: x-large;
}
</style>
<script type="text/javascript">
function jumpto( id, offset )
{
var div = document.getElementById(id);
if ( offset == null ) offset = 0;
// first, "find" the div in question:
var node = div;
var y = offset;
while ( node != null )
{
y += node.offsetTop;
node = node.offsetParent;
}
// then just scroll the body to that spot:
document.documentElement.scrollTop = y;
}
</script>
</head>
<body>
<div id="top">
<a href="javascript:jumpto('zamboni',-10);">Zamboni</a><br/>
<a href="javascript:jumpto('rowrbazzle',-100);">Rowrbazzle</a>
</div>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<div id="zamboni">
This is the zamboni div.
<br/><br/>
If you don't know what a zamboni is, you don't watch ice hockey.
</div>
<a href="javascript:jumpto('top');">TOP</a><br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<div id="rowrbazzle">
This is the rowrbazzle div.
<br/><br/>
If you don't know where "rowrbazzle" comes from, you're not as old as the hills.
</div>
<a href="javascript:jumpto('top');">TOP</a><br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
<h1>Just to fill up space</h1>
<br/><br/>
</body>
</html>

Flaw: If the place you want to jump down to doesn't have enough content *below* it so that it *can* be positioned as far from the top as you say, then it will just scroll so the bottom of the page is at the bottom of the screen.

I guess the same thing happens with <a href="#whatever"> so it's not much of a flaw. But it bugged me first time it happened.

Old Pedant
02-01-2010, 07:10 AM
NOTE: If you aren't using XHTML, you will need to use document.body.scrollTop in place of document.documentElement.scrollTop.

Old Pedant
02-01-2010, 07:12 AM
And, yes, if you specify a positive offset [e.g., jumpTo("whatsit", 100) ] then it will scroll so that the top of the given div is *above* the top of the screen.

I suppose I should have flipped the sign on the offset, but whatever. It works.

freshfan
02-01-2010, 08:01 AM
thanks so much! however the code doesn't seem to be working.

Old Pedant
02-01-2010, 07:54 PM
??? That code worked exactly as shown there in MSIE 7 and FireFox 3.5. If you are using some other browser or if you've changed the code (especially the doctype) then tell me about it.

freshfan
02-01-2010, 11:30 PM
figured it out