Question

我不是真正的jquery专家所以请耐心等待。我“谷歌搜索”但找不到任何解决方案。这是代码：

<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
<ul id="primary-menu" class="navbar-nav text-uppercase">
  <li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item"><a href="#page-top" class="nav-link js-scroll-trigger">Home</a></li>
  <li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
  <li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item"><a href="#portfolio" class="nav-link js-scroll-trigger">Portfolio</a></li>
  <li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item"><a href="#about" class="nav-link js-scroll-trigger">About</a></li>
</ul>

以下是脚本/片段的一部分：

(function($) {
  "use strict"; // Start of use strict
  $('a.nav-link.js-scroll-trigger').click(function(e) {
    console.log(e);
  });
  $('.js-scroll-trigger').on('click', 'a', function(e) {
    console.log(e);
  });
  $('li').find('a.js-scroll-trigger').click(function(e) {
    console.log(e);
  });
  $('a').click(function(e) {
    console.log(e);
  });

  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
    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 - 54)
        }, 1000, "easeInOutExpo");
        return false;
      }
    }
  });

问题是它只触发$('a')并忽略其余的选择器。我试过在浏览器上检查它：

console - https://www.screencast.com/t/sikIcYY1J

使用调试器的来源 - https://www.screencast.com/t/TgbNhIb1usy

它似乎是针对正确的选择器，但未能触发上面显示的条件。除非我将$('a')作为唯一条件，否则我的平滑滚动将不再起作用。它过去几天工作，我不知道发生了什么。某些东西必然会触发它不起作用。有人可以赐教吗？答案真的很感激，非常感谢...

Answer 1

将target.length更改为$(target).length

添加e.preventDefault();

修复var target = this.hash;

但是，为什么需要这个呢？ if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

所有你需要的是：

$(function() {
  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
      e.preventDefault();

      var target = this.hash;       

      if ($(target).length) {
        $('html, body').animate({
          scrollTop: ($(target).offset().top - 54)
        }, 1000, "easeInOutExpo");
        return;
      }
    });
});

无论如何，这是你的脚本的修复。

＆＃13;

$(function() {
  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
    e.preventDefault();
    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 - 54)
        }, 1000, "easeInOutExpo");
        console.log(target);
        return;
      }
    }
  });
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
  <ul id="primary-menu" class="navbar-nav text-uppercase">
    <li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item"><a href="#page-top" class="nav-link js-scroll-trigger">Home</a></li>
    <li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
    <li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item"><a href="#portfolio" class="nav-link js-scroll-trigger">Portfolio</a></li>
    <li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item"><a href="#about" class="nav-link js-scroll-trigger">About</a></li>
  </ul>
</div>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ggwgsgwg</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p id="services">ggwgsgwg</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ggwgsgwg</p>
<p>&nbsp;</p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p>&nbsp;</p>
<p>ggwgsgwg</p>
<p>ggwgsgwgv</p>

＆＃13;

Answer 2

这是语法错误。

(function($) {

应该需要改变

$(function() {

DEMO

Answer 3

更改你的JS＆＃34;（功能（$）{＆＃34;到此：

$(document).ready(function() {

有了这个，这些事件对我有用。

Answer 4

我有另外一个脚本，它添加了类以使平滑滚动工作。它是在上面的脚本之后调用的，所以我把它移到了functions.php（Wordpress）里面。脚本开始重新运行。傻到我不注意。对不起，麻烦，＆amp;谢谢，伙计......

即使使用正确的选择器，jquery click事件也不会触发？

4 个答案: