Stop from jumping to top of page?

[cyphix]

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.

Cheers!

[JohnKrutsch]

Try something like this:

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

[rnd me]

Originally Posted by cyphix

Is there anyway to stop the page 'jumping to the top' when using a link like the below?

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

Cheers!

yes,
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>

[Fumigator]

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.

[rwedge]

Originally Posted by cyphix

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

[cyphix]

Originally Posted by JohnKrutsch

Try something like this:

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

Thanks a bunch - worked a charm!

[felgall]

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.

[Basscyst]

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>

Basscyst

[cyphix]

Thanks for the ideas guys - but yeah; the site is pretty javascript heavy & without it is pretty useless.

[ubh]

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.

[abduraooft]

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.

[glenngv]

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.

[shaunsc]

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>
</form>

thankyou for your time shaun.

[VIPStephan]

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-...ubmit-example/

[shaunsc]

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 )