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

Question

我已经在主页上实现了CSS-Tricks平滑滚动代码段 ，并且在我决定重新构建主页之前，它运行得非常好。 现在，它根本不起作用。

这是关于我所做的一些历史。 我正在尝试建立一个单页滚动网站。 最初，我在Wordpress中创建了一个页面，并插入了3个div，分别称为“关于”，“工作”和“联系”。 我实现了“平滑滚动”代码段，并且一切正常。 但是，后来我决定做更多研究，以发现Wordpress自定义帖子类型的神奇之处。 我决定使用自定义模板（page-include.php）重建我的主页，该模板使用WP_query包含3个不同的页面。 其中两个页面（“关于”和“联系”）是实际的Wordpress页面，但是第三个页面（“工作”）只是一个自定义循环，用于提取我的自定义帖子类型。 长话短说，当我转到“设置”>“阅读”并将主页更改为直接转到新页面时，平滑滚动停止了工作。 当您单击导航栏中的链接时，页面会跳至适当的位置，但根本不会滚动。 如果将主页更改回旧版本，滚动仍然可以正常进行。 关于它为何停止工作的任何想法？

如果有帮助， 这是我的网站 。 另外，如果您想知道，我的主题是基于Roots的 。

Answer 1

JavaScript执行时发生错误，这就是脚本退出的原因，因此没有应用平滑滚动。

我已经看到， plugins.js中的脚本会在href的开头以哈希（＃） plugins.js所有链接。 不幸的是，您的导航栏中有一个链接，如下所示： <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为空，则不会触发，脚本将继续工作。