为什么我不能同时运行这两个javascripts？ （平滑滚动和固定页脚）

Question

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

如果我只为页脚包含js，则页脚有效（例如http://www.colinandmya.com/footertest/footer.html）

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

我对javascript的知识有限，在jquery中更是如此，但我可以使用它背后的逻辑。

非常感谢任何帮助。

Answer 1

第一个想法

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

您的脚本

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

然后你应该在页脚中加载你的脚本，这样当读者到达那里时，整个DOM已经被解析，因为你需要知道该页脚的位置你之前的东西＆＃34;做东西＆＃34;使用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（＆＃34; yourID＆＃34;）;

的jQuery

var yourVariable = $（＆＃34;＃yourID＆＃34;）;

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

我会做什么

使用其他脚本进行滚动。对于像这样的东西，最小的一直是最好的。确保变量在函数中以长格式存在，否则它们将是全局变量。

查看js并查看是否存在可能存在冲突的类似命名变量。

scrollToFixed有很多内容用于滚动和固定定位，可能与其他一些固定定位代码相冲突......（另外 - 我之前使用过那个脚本而且有点问题） - 所以我会说完全跳过它。

然后在a jsFiddle like this one.

中尽可能简单地将其分解

请记住，自2014年4月起，触控设备并未真正处理固定位置 - 因此在iPad等问题上会出现问题。以下是a CodePen处理那。祝你好运！