Question

我已经在我的主页上实现了CSS-Tricks Smooth Scrolling snippet，它工作得非常好直到我决定重建我的主页。现在它根本不起作用。

这里有一些我做过的历史。我正在尝试构建一个单页滚动网站。最初，我在Wordpress中创建了一个页面并插入了3个div，称为“关于”，“工作”和“联系”。我实现了Smooth Scrolling片段，一切都运行良好。然而，然后我决定做更多的研究，在此期间发现了Wordpress自定义帖子类型的神奇之处。我决定使用自定义模板（page-include.php）重建我的主页，该模板使用WP_query包含3个不同的页面。其中两个页面（'about'和'contact'）是实际的Wordpress页面，但第三个页面（'work'）只是一个自定义循环拉动我的自定义帖子类型。长话短说，当我去设置＆gt;读取并更改主页以指向新页面，平滑滚动停止工作。当您单击导航栏中的链接时，页面会跳转到适当的位置，但它根本不会滚动。如果我更改将主页设置回旧版本，滚动仍然可以正常工作。关于它为什么停止工作的任何想法？

如果有帮助，here's my site。此外，如果您想知道，我的主题基于Roots。

Answer 1

JavaScript执行时出现错误，这就是脚本退出的原因，因此不会应用平滑滚动。

我已经看到，plugins.js中的脚本在href的开头用散列（＃）遍历所有链接。很遗憾，您的导航栏中有一个链接，如下所示：<a href="#anchor3">Anchor 3</a>

现在您的网站中没有<div id="#anchor3">这样的部分，这就是您的脚本引发错误的原因。

问题是你的plugins.js中的这行代码，大约在第30行：

var targetOffset = $target.offset().top;

$ target为空，请尝试alert($target.length)或console.log($target.length)获取证明。现在要解决此问题，请更改此行：

if (target) {

到此：

if (target && $target.length) {

现在，在调用.offset()之前，您的脚本将检查您的jQuery选择中是否有任何元素。如果$target为空，则不会触发，脚本将继续有效。

顺利滚动停止工作 - 我做错了什么？

1 个答案: