Stop browser from jumping to #name when page loads

Question

I have a form in a jQuery dialog box named "login". In JavaScript, I detect if "#login" is in the URL -- if so, it displays the login dialog box. In FF/Safari/Chrome it works fine, but in IE6/7 the browser page jumps down to the top of the form when the dialog box is displayed. I would like to prevent this from happening.

I found what looked like an answer to my question here, which gives this example code:

$('a.anchor').remove().prependTo('body');

I changed "a.anchor" to "form.anchor", but it doesn't work correctly. When I first load mydomain/#login IE still jumps down to the top of the form. Then if I refresh the page it again displays the dialog box but doesn't jump down.

Any idea how to globally just prevent IE from jumping to any form/anchor names?

Answer 1

........ don't put the named anchors you don't want used in your code?

Answer 2

I'd recommend using a query parameter or something, like page.html?showlogin=true. The page.html#xxxxx on a URL is meant to scroll the browser to that ID on the page.

http://www.w3schools.com/html/html_links.asp halfway down explains the name attribute.

Otherwise you'll be doing some messy hacks to get around browsers doing what they are supposed to do.

Answer 3

There are legitimate reasons to use the hash mark this way. In Ajaxian applications it can help manage the browser history.

All browsers, including IE, should be ignoring the location.hash unless there is a named anchor -- except that IE likes to jump down to any element with that ID or NAME. So if you have

<form name="login" ...

or

<form id="login" ...

or even

<div id="login"><form name="somethingElse"...

that might cause IE to treat it like the traditional hash mark and jump down.