View Full Version : Stop from jumping to top of page?

09-11-2007, 02:24 AM
Is there anyway to stop the page 'jumping to the top' when using a link like the below?

<a href="#" onClick="arrangeCards();">blah</a>

.. I just want it to stay in the same position on the page & not jump to the top of the page every time a link like that is clicked.


09-11-2007, 06:26 AM
Try something like this:

<a href="#" onclick="arrangeCards();return false">blah</a>

rnd me
09-11-2007, 07:19 AM
Is there anyway to stop the page 'jumping to the top' when using a link like the below?

<a href="#" onClick="arrangeCards();">blah</a>


way 1: don't use a fake anchor.

<span style="color:blue" onClick="arrangeCards();">blah</span>

way 2: use a real javascript anchor.

<a href="javascript:arrangeCards()" >blah</a>

09-11-2007, 08:18 AM
Only problem with that is IE6 doesn't support hover on non-anchor elements. I go with the <a href="#" onclick="arrangeCards();return false">blah</a> because it seems the most consistent on all browsers.

09-11-2007, 10:16 AM
Is there anyway to stop the page 'jumping to the top' when using a link like the below?

<a href="#" onClick="arrangeCards();">blah</a>

.. I just want it to stay in the same position on the page & not jump to the top of the page every time a link like that is clicked.
When you use href="#" the URL resolves to
http://www.yoursite.com/current_page.html#and is looking for an anchor. That can cause you to 'go to the top'.

You can target a name or id to handle this behavior.

<a href="#here">text</a>
<a name="here"></a>
"here" will be the target instead of the top of the page

09-11-2007, 03:19 PM
Try something like this:

<a href="#" onclick="arrangeCards();return false">blah</a>

Thanks a bunch - worked a charm! :thumbsup:

09-11-2007, 09:49 PM
To stop the link jumping to the top of the page when JavaScript is turned off you need to get rid of the link to the top of the page - the part that reads <a href="#"> is a link to the top of the page.

If you don't want it to link to anywhere don't use an <a> tag - use a <span> and style it to look however you want.

09-11-2007, 11:50 PM
While I realize this may not suit your needs, as you appear to be arranging cards or something, it should be noted that you can put an actual url in the href for non js users that will proceed to a page that can possibly process the desired code on the server side.

<a href="dostuffserverside.asp" onclick="doStuff();return false;">Do Stuff</a>


09-11-2007, 11:54 PM
Thanks for the ideas guys - but yeah; the site is pretty javascript heavy & without it is pretty useless.

02-08-2010, 07:26 PM
Note to self:

Seems to be that the best solution is to use both methods to ensure that it works across all browsers and versions:

<a href="#undefined" onclick="someAction(); return false;" ....

The above will:
A) do a hunt on the page for another anchor link that has a name="undefined" but because there is none it will result in NO page jumping.
B) The return false in the inline onclick event will (if js is enabled) stop any further actions upon completing the someAction() function.

Easy to setup and is the best of both worlds if you ask me.

02-08-2010, 07:46 PM
Easy to setup and is the best of both worlds if you ask me.
The best, IMO, is again what Basscyst had given. It ensures the basic service for all users.

02-09-2010, 10:06 AM
abduraooft is correct but it looks like this is a javascript game and as the original poster said, the page is heavy in javascript and without it, the page is useless and that link will probably not be visible or available.

02-10-2010, 01:50 PM
hi everyone

i dont know if anyone can help but i have a web site www.homebrewcentregy.com with a seprate shopping cart system. wich is very good and dont want to move, the point is when i add items to the cart i can eather go to the cart and back to the site by continue shopping or have it so i stay on the same page where i have it set at at the moment.

but when i add to cart the page jumps to the top of the page and shows what is in the basket.is it possable when i add to the cart the item adds without moving and ( ? maybe ) when the button is clicked it will show an image like a green tick. here is the code to the button

<form action='http://www.romancart.com/cart.asp' method=post>
<input type=hidden name=itemcode value='1391'>
<input type=hidden name=storeid value='XXXXX'>
<SCRIPT LANGUAGE="JavaScript" SRC="http://www.remoteprice.com/data.asp?storeid=XXXXX&itemcode=1391&type=1"></script>
Qty:&nbsp;<input type=text name=quantity size=2 maxlength=6 value=1>&nbsp;<input type=submit value='Add to basket'>
&nbsp;<SCRIPT LANGUAGE="JavaScript">document.write(roc_rdd_available_1391);</SCRIPT>

thankyou for your time shaun.

02-10-2010, 02:04 PM
Hi Shaun,
The “problem” is that upon pressing the submit button the form is submitted to http://www.romancart.com/cart.asp and then processed on the server and then the page is reloaded to retreive the the results from that process. When a page is reloaded it is usually at the top again.

What you need is to submit the page without reloading which can be achieved with an XMLHttpRequest object (commonly referred to as AJAX). Here is an example you can probably add to your site: http://www.simonerodriguez.com/ajax-form-submit-example/

02-10-2010, 07:32 PM
still no luck i'm afraid i have very little knowledge of programing and need of a step by step guide PLEASE all help gratefully received:)
thank you shaun. ( willing to make a donation on resolvement via pay pal )

02-14-2010, 11:45 PM
@shaunsc and @VIPStephan,

Wouldn't that require the ajax source to reside on romancart.com,
instead of homebrewcentregy.com ?


02-15-2010, 06:27 PM
Hm, now that you mention it – you’re right, an AJAX request can only come from the same domain for security reasons. Sorry, I didn’t think of this. The only other way I can imagine would be an iframe then.

02-15-2010, 08:04 PM
Yes I think iframe would keep the page from jumping to top.

Not familiar with romancart before,
but an idea just came up by reading their reference:

A field called "returnurl" to be included whenever user click addtocart button.

<input type="hidden" name="returnurl" value="">.
The idea is not to prevent current page from jumping,
but is to make the right jump.

So if we could set returnurl value to "currentpage.htm?pos=pageYOffset" or something like that,
hopefully romancart would pass that additional url to
be used by current page javascript for scrollTo() action.

Err, nevermind... its too complicated and has no guarantee.
I couldn't find any "returnurl" usage in their forum.

Better stick with VIPStephan idea... the iframe.

08-11-2010, 11:29 PM
You could use iframe, but it's a little ugly. So think about the question a little more. What you want to do is stop the the page from jumping to the top using an href="#"... It's probably a little harder to do that since href="#" probably jumps to a null id. See using the '#' usually denotes an objects id. Hence it jumps to the top because the id is not defined.
What if instead, you jumped to an actual id on the page? Possible... just set href="#idname" id an objects id on the page was set to "idname". That only gets you halfway there though, because it still jumps doesn't it? Depending on where the user is on the page and the id... it gets messy.
What if the object were moving, dynamically. Scrolling as the user scrolled. Something like this (when you set the position to "Top Left"):
All you simply have to do is:

1. Make a similar object lets say in a Panel that contains nothing but empty space (<p><br/><p>) so the user doesn't actually see it (the object).
2. add the "AlwaysVisibleControl" Ajax Control to the page and have the TargetControlID set to the Panel ID created above.
3. Run it

Of course you'd need to develop some type of hovering div using javascript, which I'm sure isn't hard to find if you google it. This is just a theory that I will bet works. Does this answer your question?

-Taiwo Egun