javascript - 粘性 'back to top' 按钮在 iMac Firefox 中有效，但在 Safari、Chrome 或 Android 手机中无效

Question

我很感兴趣地阅读了 Will Ryan 于 2014 年 3 月 12 日 19:28 提出的问题，因为我在使用相同的“粘性‘返回顶部’按钮”教程时遇到了问题。我的按钮甚至没有出现。但我根据讨论建议重写了我的代码并让它完美地工作——在 Firefox 中，在我的 iMac 上。但它在我的 iMac 或三星 Galaxy 4GLTE 上的 Safari 或 Chrome 中都不起作用。我检查了 Safari 和 Chrome 开发人员工具中的错误，但没有显示任何错误。我认为这可能是 Z-index 图层问题，但我在那里的努力失败了。这是网站:http://willsoper.net/谢谢。

Answer 1

感谢 LJ_1102。我也看到了这条错误消息，但在研究一个较早的问题并阅读@Oladipo Olasemo 于 7 月 28 日 12:46 的这篇文章时看到它后选择忽略它:

Usually when you get this problem, it happens cause a script is trying to reference an element that doesn't exist yet while the page is loading.

As richie mentioned: The HTML parser will parse the HTML content from top to bottom….

So you can add your javascript references to the bottom of the html file, this will not only improve performance, it will also ensure that all elements referenced in your script files have already been loaded by the HTML Parser.

当我读到它时，我移动了我的 <script src="js/script.js"></script>就在我头脑中的此类脚本列表的底部，这立即并完全解决了第一个问题，在这个问题中，代码在 FF 中运行但在 Chrome 和 Safari 中失败。

现在，当我读到 LJ 上面的评论时，它激发了我重新阅读 Oladipo 的评论并移动我的 <script src="js/script.js"></script> 的想法。从头一直到我 body 代码的底部。这立即完全解决了问题，我的“返回顶部”按钮现在不仅可以在 FF 中使用，还可以在 Chrome、Safari 和我的 Android 智能手机上使用。 (而且第一个问题也仍然解决。)

我现在将研究 LJ 关于我的容器 float 的评论，我知道这是错误的但不知道如何修复。