Page "jumping" back to top... how do I stop it?

**Jeanco** · Jan 26, 2006 12:51

Hello,

I have a piece of javascript running about mid-section on a webpage. It's doing exactly what I want it to do, but when it runs it also "jumps" the page back to the top. That is, if I have my scroll bar half way down the page, when I click on the link and run this code it jumps me back to the top as if I'm visiting for the first time.

Any ideas on how to keep it on the same spot on the page while still executing the code?

Here is my code:

Code:

function changeOrderDetail(changeTo) {
	if (changeTo == "guys") {
		document.getElementById('orderDetail').style.backgroundImage = "url(images/subpage_odguysbg.jpg)";
	} else {
		document.getElementById('orderDetail').style.backgroundImage = "url(images/subpage_odgalsbg.jpg)";
	}
}

**vwphillips** · Jan 26, 2006 12:59

tested this IE & Moz FF seems ok
sure there is not an event on a parent node?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
function changeOrderDetail(changeTo) {
	if (changeTo == "guys") {
		document.getElementById('orderDetail').style.backgroundImage = "url(http://www.vicsjavascripts.org.uk/StdImages/One.gif)";
	} else {
		document.getElementById('orderDetail').style.backgroundImage = "url(http://www.vicsjavascripts.org.uk/StdImages/One.gif)";
	}
}
//-->
</script></head>

<body>
<div   style="width:200px;height:1200px;background-color:blue;" ></div>
<div id="orderDetail"  style="width:200px;height:200px;background-color:red;" onclick="changeOrderDetail('changeTo');"></div>
</body>

</html>

**ega1** · Jan 26, 2006 14:09

Originally Posted by Jeanco

Hello,
Any ideas on how to keep it on the same spot on the page while still executing the code?

The problem is likely in how you call the code. If you are doing it in a link's onclick event you have to suppress the link's normal function.

Try doing something like this:

Code:

<a href="#" onclick="changeOrderDetail('guys'); return false">link</a>

Or make changeOrderDetail return false and then just use:

Code:

<a href="#" onclick="return changeOrderDetail('guys')">link</a>

**Jeanco** · Jan 26, 2006 17:27

Thanks ega1, that did the trick. I never knew what the significance was of that return value.

Is there anything else I should know about it?

Thanks again!

**ega1** · Jan 26, 2006 17:47

Originally Posted by Jeanco

Is there anything else I should know about it?

The same thing is true for onclick events for submit buttons and reset buttons - returning false causes the normal operation to be suppressed.

**Jeanco** · Jan 26, 2006 18:14

OK, thanks a bunch.

**LavernGingerich** · Oct 13, 2006 08:28

Hi,

I had the same problem, and I was only using mouseover and mouseout. But you can add onclick="return false" to the code and it fixes the problem.

**felgall** · Oct 13, 2006 14:19

Why use an <a> tag if you don't want it to link to something. The last browser to limit you to using mouse events on spans was Netscape 4 and just about no one uses that any more. In all browsers more modern than Netscape 4 the following are equivalent just the second is shorter and more syntactically correct since the content isn't a link.

<a href="#" onclick="return changeOrderDetail('guys'); return false">link</a>
<span onclick="return changeOrderDetail('guys')">link</span>

**LavernGingerich** · Nov 4, 2006 20:12

Thanks. I am new enough in Java, I didn't know.

User Tag List

Thread: Page "jumping" back to top... how do I stop it?

Thread Tools

Display

Page "jumping" back to top... how do I stop it?

Bookmarks

Bookmarks

Posting Permissions