firefox hash anchor url problem

I have a form on a page, that I'm working on, and (as it's quite a way down), if there's an error, I'm appending the url with

show?comments=2#track_1

where the comments=2 bit is feedback on which field went wrong, and track_1 is the the id of the div in which my form is sitting. This works great in IE (8 at least), but in firefox, the page just sits at the top, without jumping down to the relevant section.

Strangely enough, when I select the URL and push enter in the address bar (i.e. when I go to the address manually, instead of it being generated by the form's validation feedback) it works in firefox!

Anyone have any ideas on what could be going on?

EDIT

n.b. this is happening only with javascript turned off (though th开发者_运维问答is is precisely when I need it to work!)

Your problem sounds like a known bug. Upvote it here.

If you have an autofocus in the page, this can be the reason for the problem. Try removing the autofocus and test.

If it is the reason, upvote the bug in mozilla through this link.

Use the correct way of the #-sign, this is not by ID! You have to name the position with an anchor like this:

<a name="track_1"></a>

Add this to the javascript to correct the view, change YOUR_ANCHOR, for the name of the anchor with issues.

$(document).ready(function (){
 var anchor_id = window.location.hash; if (anchor_id != "#YOUR_ANCHOR") {
             var new_position = $(anchor_id).offset(); 
             window.scrollTo(new_position.left,new_position.top); 
} 
};

That should reset the firefox issue.

If you're using jQuery with smoothScroll, the following script placed after all other javascript will work. You can check it working in Firefox at http://cafedethaireno.net/index.php#togo_menu

$(document).ready(function(){
var h = window.location.hash;
if (h) {
    var headerH = $('#navigationMenu').outerHeight();
    $('html, body').stop().animate({
        scrollTop : $(h).offset().top - headerH + "px"
    }, 1200, 'easeInOutExpo');

        event.preventDefault();
}
});

Hope this helps, I'm using a fixed header navigation to offset the top position, but the code can easily be manipulated to suit.

For me this problem was solved by removing non alphanumeric characters (including spaces) like double point (also the url-encoded %3A) with the only use of -_. as separators.

not really related to your issue, but maybe for others:

replace all spaces with dash, underscore or dot, then remove all non alphanumeric characters and it should work.