火狐浏览器哈希锚点URL问题

Question

我正在处理一个页面上的表单，如果出现错误，我会在URL后面添加一些内容（因为表单在页面中比较靠下）。

show?comments=2#track_1

其中comments=2位是反馈哪个字段出错，track_1是我的表单所在的div的id。在IE（至少8）中效果很好，但在Firefox中，页面只停留在顶部，没有跳转到相关部分。

奇怪的是，当我选择URL并在地址栏中按下Enter键时（即手动访问地址，而不是由表单的验证反馈生成），它在Firefox中工作！

有人有任何想法吗？

编辑

请注意，这仅在关闭JavaScript时发生（尽管这正是我需要它工作的时候！）

- tiswas

---

如果表单提交失败，在我的控制器中（我使用的是PHP Zend框架），我会写入以下代码：return $this->_redirect('/artists/show?'.$commentsFail.'#track_'.($params['tracknb']-1)); 其中$commentsFail是URL中的一部分，上面的例子中为'comments=2'。 - tiswas

Answer 1

您的问题听起来像是一个已知的 bug。在这里点赞。

- Garnet

Answer 2

如果页面中有自动对焦功能，这可能是问题的原因。尝试去掉自动对焦并测试。

如果是这个原因，请通过link在Mozilla上投票以解决此问题。

- Ahmed

Answer 3

使用正确的#号方式，而不是通过ID！您必须像这样使用锚点来命名位置：

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

- Tobias

---

那不是正确的。它也会跳转到具有相应ID的元素。请参见：http://dev.w3.org/html5/spec/Overview.html#scroll-to-fragid - Felix Kling

Answer 4

如果您正在使用jQuery和smoothScroll，那么在所有其他JavaScript之后放置以下脚本将起作用。您可以在Firefox中检查它在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();
}
});

希望这能有所帮助，我使用了固定的标题导航来抵消顶部位置，但是代码很容易被修改以适应不同情况。

- user3650129

Answer 5

将以下内容添加到JavaScript中以修正视图，将YOUR_ANCHOR更改为具有问题的锚点名称。

$(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); 
} 
};

这应该可以解决Firefox的问题。

- user3330544

Answer 6

对我来说，这个问题是通过删除非字母数字字符（包括空格），例如双点（也包括URL编码的%3A），只使用-_.作为分隔符来解决的。

虽然与您的问题没有真正关系，但对于其他人可能有用：

将所有空格替换为破折号、下划线或点，然后删除所有非字母数字字符，就可以解决问题。

- rémy