Firefox 手机上的内部锚点位置（在 android 上）答案

【问题标题】：Internal anchor Position on firefox mobile (on android)Firefox 手机上的内部锚点位置（在 android 上）
【发布时间】：2015-01-23 12:54:45
【问题描述】：

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

<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;
    }
}

我的想法是，我应该能够在整个站点的菜单中单击“项目 1”，然后进入主页的特定部分。

这非常好用，除了在 firefox mobile 上，点击主页内部锚链接从任何其他内部页面将导致主页加载 100 之间的任意位置距离预定位置 200 像素。

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

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

重要的是，我怎样才能让 firefox mobile 第一次找到正确的位置？

非常感谢任何见解。

完整的 css 和 html 在 http://whoisnicoleharris.com 直播

【问题讨论】：

您好，HTML sn-p 不足以调查此问题。您能否告诉我您的 CSS 是如何设置的，以及 HTML 段是否嵌套在其他容器中。这很可能是相对绝对定位问题。
该站点实际上位于whoisnicoleharris.com（可能比在此处复制所有代码更容易）
我无法复制。当您说 Firefox Mobile 时，您是在说 Firefox for Android（尝试过，无法重现），Firefox OS（尝试过 v2.0，无法重现），几年前以 Fennec 为名浮出水面的那个，还是别的什么完全？我按照 Schien 所说的为他工作的相同步骤进行操作，所以我假设我使用了错误的浏览器，除非硬件正在标记差异。
我遇到的问题是在 Android 5.0.1 上使用 Firefox 移动版。我在同一部手机上使用 Chrome 时没有遇到同样的问题，所以我认为这只是 FF 的问题。
我刚刚在 Android 4.4 上的 Firefox 移动版上进行了测试。我无法重现。我已经测试了从主页到部分，以及从部分的内部页面。我尝试一步一步地按照 Schien 的复制说明进行操作……连接页面……写作……定位运行良好。发布此问题后，您是否更改了某些内容？

标签： html css firefox mobile cross-browser

【解决方案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 像素。

【讨论】：

【解决方案2】：

我已执行以下操作来重现错误。

我去了连接页面，然后点击“写作”。定位确实不对。然后我禁用了 JavaScript 以依赖锚点。它工作正常。

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

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

【讨论】：

我刚刚在本地测试过，去掉滚动的JS对我没有影响。