Question

我有一个包含多个部分的主页 - 每个部分都链接到主菜单：

<body>
    <header>
        <!-- nav used on all pages -->
        <a href="#nav" class="toggle-nav">
            menu <i class="fa fa-bars"></i>
        </a>
        <nav class="main-nav" id="nav">
            <a href="/#item1">Link</a>
            <a href="/#item2">Link</a>
        </nav>
    </header>


    <!-- homepage -->
    <main>
        <section id="item1">some content here </section>
        <section id="item2">some other content here </section>
    </main>
</body>

（可能）相关的css：

body {
    position: relative;
    overflow-x: hidden;
}

@media only screen and (max-width: 750px) {
    header .main-nav a {
        display: block;
    }

    .tiggle-nav {
        display: none;
    }
}

我的想法是，我应该可以点击＆＃39;第1项＆＃39;在整个网站的菜单中，并登陆主页的特定部分。

这非常有效，除了在firefox mobile上，点击主页内部锚点链接来自任何其他内部页面将导致主页加载在100之间距离预定位置200px。

有趣的是，如果我在主页最初加载后刷新页面，firefox mobile可以找到没有问题的内部锚点 - 这只是从内部页面导航到主页时的问题

这里发生了什么？这是否与firefox mobile没有加载CSS有关，直到之后找到内部锚点？

重要的是，如何让firefox移动设备第一次找到正确的位置？

非常感谢任何见解。

完整的css和html现在位于http://whoisnicoleharris.com

Answer 1

在main.js中，对于以下部分，将400更改为0：

$('#top').click(function(e) {
    e.preventDefault();
    $('body,html').animate({scrollTop:0},400);
});

更改后的代码如下所示：

$('#top').click(function(e) {
    e.preventDefault();
    $('body,html').animate({scrollTop:0},0);
});

在这里测试，似乎可以解决问题，但我不能说确切原因。它必须由于在锚链接上方添加额外的400个像素。

Answer 2

我已完成以下操作以重现错误。

我进入了连接页面，然后点击“写入”。确实没有定位。然后，我禁用了JavaScript来依赖锚点。它运作正常。

我的解决方案是检测页面上的特定对象，以决定JavaScript滚动与直接锚定。

if (document.getElementById('homepagebookmark')){
  //do scroll
} else {
  //leave it be
}

firefox mobile上的内部锚点位置（在android上）

2 个答案: