关闭后无法实现锚点平滑滚动 canvas menu/content

Question

我正在为我正在进行的项目寻求帮助，但我似乎无法弄清楚。我已经搜索并尝试了各种脚本以及没有冲突的脚本。我希望有人能帮助我。

我有一个从导航锚定到页面内容的页面。当您将鼠标悬停在页面中间的图像上时，您可以单击关闭 canvas 页面。我已经完成了这项工作，但是当您单击页面底部的主导航时，我希望能够平滑滚动。 off canvas 锚点和平滑滚动脚本似乎不能一起工作。我对 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');
});

但它只切换活动和非活动状态。我希望它们仅在您单击另一个导航项之前保持活动状态。

平板电脑问题：

另外请注意，我的 mobile/tablet 导航中的汉堡包 link 在点击后不会关闭导航。它只是保持开放。单击 link.

后，我似乎无法触发 off canvas 关闭

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

谢谢！

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 未激活，然后将其激活。

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

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

希望能有所帮助，必须运行但如果没有其他人这样做，我会回来尝试主要的。

关闭后无法实现锚点平滑滚动 canvas menu/content

Can't implement anchor smooth scrolling with off canvas menu/content

html

javascript

jquery

smooth-scrolling

off-canvas-menu