javascript - 为什么我不能同时运行这两个 javascript？ (平滑滚动和固定页脚)

Question

我正在尝试构建一个具有平滑滚动功能和固定页脚的网站，该页脚将保留在页面底部，并带有指向构成页面本身内容的各个 s 的链接。

如果我只包含页脚的 js，页脚就可以工作(例如 http://www.colinandmya.com/footertest/footer.html)

但是，当我包含平滑滚动的脚本时，它会破坏页脚的功能(例如 http://www.colinandmya.com/footertest/footerscroll.html)

我对 javascript 的了解有限，对 jquery 的了解更少，但我可以凑合使用它背后的逻辑。

如有任何帮助，我们将不胜感激。

Answer 1

最初的想法

通常当有 2 个脚本冲突时，这是因为它们共享变量名或其他东西，但在这种情况下，我没有看到任何迹象。据我所知，在这种情况下，固定页脚不需要 javascript。

你的脚本

javascript 在浏览器中已经是默认的......我想你已经知道了。

然后您应该在页脚中加载您的脚本，这样当读者到达那里时，整个 DOM 已经被解析，因为您需要知道页脚在哪里等等在您使用 javascript 对其进行“操作”之前。

因此，作为开始，我会确保您在 </body> 的底部按重要性顺序排列所有内容

    <script src="jquery.js"></script>

    <script src="your-footer.js"></script>

    <script>
        var your_function = function() {
            // etc. your scroll stuff?
        });
    </script>

</body>

CSS 固定页脚

这会将其从流程中取出并根据外部窗口对其进行定位 - 对比 position: static;这是默认情况下的内容。

.your-footer {
    position: fixed;
    width: 100%; /* maybe not necessary - already a block element */
    left: 0;
    bottom: 0;
}

jQuery 是 javascript

js

var yourVariable = document.getElementById("yourID");

jQuery

var yourVariable = $("#yourID");

jQuery 只是一个预写函数库，可以让编写 javascript 更简洁一些，并处理许多跨浏览器问题，因此您不必这样做。

我会做什么

使用不同的脚本进行滚动。最小的总是最适合这样的东西。确保变量在函数中并且是长格式，否则它们将是全局的。

查看js，看看是否有类似命名的变量可能会发生冲突。

scrollToFixed 中有很多用于滚动和固定定位的东西，可能会与其他一些用于固定定位等的代码冲突......(另外 - 我以前使用过那个脚本并且它有点问题) - 所以我会说完全跳过。

然后在a jsFiddle like this one.中尽可能简单地分解它

请记住，截至 2014 年 4 月，触摸设备并不能很好地处理固定位置 - 所以这将成为 iPad 等设备上的问题。这里是 a CodePen处理那个。祝你好运!