Question

我想知道为什么smoothscroll在我当前的项目中不起作用。我在以前的项目中使用它，但这次在我当前的项目中它不起作用。你们中有谁知道它为什么不起作用？

html锚具有Id，并且当它悬停时它也会缩放。

这是JS

$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  });

Answer 1

我不知道这个代码是否响应了点击，但是如果没有，这对于那些以jQuery开头的人来说是一个非常普遍的问题。这就是以下代码的作用：

$(function() {
  ...
});

表示：页面启动时运行以下命令。

在其中，这是以下代码所做的：

$('a[href*="#"]:not([href="#"])').click(function() {
  ...
});

这意味着：找到指定的元素，然后单击执行以下代码。换句话说：找到元素并为其附加事件处理程序。但请记住，此命令“找到元素”在页面加载时运行。

这假设在运行代码时，您希望对它做出反应的元素存在，在这种情况下，可能是在加载页面时。

但现在经常情况并非如此。您可以从JSON导入一些数据并将其转换为链接。在这种情况下，加载页面时链接将不存在。处理它的一种天真的方法是稍后添加事件处理程序。这有几个原因：

首先，每次加载JSON时都必须添加事件处理程序，这很浪费，这是一个令人困惑的工作流程。
您没有在一个地方设置链接。
你可以添加大量的事件处理程序，理想情况下，一个会更好。它会使用更少的资源。

幸运的是，您只需要设置一个，并且可以在页面加载时进行设置。您需要做的就是将它附加到任何包含加载页面时存在的目标元素的内容。我将以body为例，但只要就可以

它是目标元素的祖先和

在运行指定它的函数时存在。

这是我的例子：

$('body').on('click', 'a[href*="#"]:not([href="#"])', function() { ... });

这意味着：查找body（在加载页面时必然存在）以及何时获得点击，运行此操作，但仅当点击更具体地在此后代时：'a[href*="#"]:not([href="#"])'。

只有一个处理程序。它是在页面加载时设置的。它将适用于所有未来的链接，无论您在页面的生命周期内多少次更改它们。

为什么smoothscroll不起作用？

1 个答案: