平滑滚动停止工作 - 我做错了什么？

Question

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

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

如果有帮助，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 为空，则不会触发，脚本将继续工作。