Question

我正在寻找有关我正在进行的项目的帮助，我似乎无法弄明白。我搜索并尝试了各种脚本以及没有冲突脚本。我希望有人可以帮助我。

我有一个页面，从导航到页面上的内容。将鼠标悬停在页面中间的图像上时，可以单击关闭画布页面。我有这个工作，但是当你点击页面底部的主导航时我想要平滑滚动。似乎off画布锚和平滑滚动脚本不能一起工作。我对jquery和javascript很新，所以我似乎无法使它工作。

我发现这个代码用于平滑滚动（现在我已将其注释掉），但是当我将此代码放在页面上时，它会破坏导航锚点：

$(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;
    }
  }
});
});

是否有其他代码可以在我的页面上运行？你可以在这里查看我的页面：

http://ebresearch1.wpengine.com/index.html

另外，我的导航图标处于活动状态时遇到问题。

我正在使用此代码：

jQuery('.nodes a').click(function () {
jQuery(this).find('.inactive-circle').toggleClass('active hide');
});

但它只能切换活动和非活动状态。我希望它们保持活动状态，直到您点击另一个导航项目。

平板电脑问题：

另外请注意，点击后导航中的手机/平板电脑汉堡包链接不会关闭导航。它只是保持开放。点击链接后，我似乎无法触发关闭画布。

我知道这是很多信息，但我被困住了。如果我需要提供更多信息，请告诉我，我会发布。

谢谢！

Answer 1

快速解决你的第二个问题：

jQuery('.nodes a').click(function () {
   jQuery('.nodes a').find('.inactive-circle').removeClass('active hide');
   jQuery(this).find('.inactive-circle').addClass('active hide');
});

不太确定你的div和css是如何在这里设置的，因为它感觉它可能更简单，但是这个的主要原则是首先使你的所有.nodes a div都处于非活动状态，然后使这个活性

对于第三个问题，这有点像黑客但是为了避免干扰你的offCanvas脚本，你可以在单击菜单div时触发汉堡包上的点击：

jQuery('#0 a').click(function () {
    jQuery('#rightBurger').trigger('click');
});

希望有所帮助，必须跑步，但如果没有其他人这样做，他们会回来并尝试使用主要的。

无法使用画布菜单/内容实现锚点平滑滚动

1 个答案: