Page moves on link submit

Question

Hi i was wondering if anyone new how, when on link submit the page does not move i.e

<a href="#"></a>

If it was 2 page leghts down it would shoot up to the top.

regards

Answer 1

If you are using .net 2.0

There is a

MaintainScrollPositionOnPostback

property in @page directive that you can use to maintain the scroll position of the page.

Gets or sets a value indicating whether to return the user to the same position in the client browser after postback. This property replaces the obsolete SmartNavigation property.

When Web pages are posted back to the server, the user is returned to the top of the page. On long Web pages, this means that the user has to scroll the page back to the last position on the page.

When the MaintainScrollPositionOnPostback()()() property is set to true, the user is instead returned to the last position on the page.

If you can't use this then set location.href to an anchor tag at the specified position after the submit.

location.href = "#anchAtPos";

where anchAtPos is the id of the anchor tag at a specified position.

Answer 2

function anchorReplace()
{
 $("#reportWrapper a").each(function(i){
  var anchorElement = $(this);
  var newAnchorElement = $('<a href="#link' + i + '" name="#link' + i + '">' + anchorElement.text() + '</a>').insertBefore(anchorElement);
   anchorElement.remove();
 });
}

its ok i wrote this and works thx for your help

Answer 3

No need to replace anchors, as your own answer to the question states.

This will work just as well:

<a href="#" onclick="yourOwnSubmitFunction(); return false;">

In short, just make sure that whatever function is in the onClick handler returns boolean false.

Answer 4

Whilst having the link's onclick handler return false; is the correct way to stop a link being followed, it's a bit of a hack to use a link this way, because what you've got is an action and not a link. You can't do the usual link-like things to your link, like right-click-bookmark, or middle-click-for-new-tab and so on, so it shouldn't really have that affordance.

An alternative (that eg. SO uses) is to put the onclick on a non-link element instead, eg.:

<span id="potato">Do something</span>
<script type="text/javascript">
    document.getElementById('potato').onclick= function() {
        // do something
    };
</script>

This is cleaner, but has a drawback in is that the link can't be focused and activated by the usual keyboard tabbing method.

Arguably better is to use an <input type="button"> or <button type="button">, which are the right markup to represent an action. Of course these look quite different, but you can use CSS to style them so that they look like a link instead of a button if you like. The one drawback of this method is that good old silly IE cannot completely restyle a button; you will get a few pixels of unremovable extra padding in this browser.