无法通过画布菜单/内容实现锚点平滑滚动 [英] Can't implement anchor smooth scrolling with off canvas menu/content

问题描述

我正在寻找我正在从事的项目的帮助，但似乎无法解决.我搜索并尝试了各种脚本以及没有冲突的脚本.我希望有人能帮助我.

I’m looking for help on a project I’m working on and I can’t seem to figure it out. I’ve searched and tried various scripts as well as no conflict scripts. I’m hoping someone can help me out.

我有一个页面，该页面从导航到页面内容都锚定.将鼠标悬停在页面中间的图像上时，可以单击以关闭画布页面.我已经做好了这项工作，但是，当您单击页面底部的主导航时，我希望能够平滑滚动.外部画布锚点和平滑滚动脚本似乎无法一起使用.我对jquery和javascript非常陌生，因此似乎无法使其正常工作.

I have a single page that anchors from the nav to content on the page. When you hover over an image in the middle of the page, you can click to an off canvas page. I’ve got this working, however I would like to have smooth scrolling when you click on the main navigation at the bottom of the page. It seems that the off canvas anchors and the smooth scrolling script don’t work together. I’m very new to jquery and javascript, so I can’t seem to make it work.

我找到了用于平滑滚动的代码(现在我已将此注释注释掉了)，但是当我将此代码放置在页面上时，它破坏了导航锚:

I found this code for the smooth scrolling (right now I have this commented out), but when i place this code on the page, it breaks the nav anchors:

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

还有其他可以在我的页面上运行的代码吗?您可以在这里查看我的页面:

Is there another code that can work on my page? You can inspect my page here:

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

此外，我的导航图标处于活动状态也很麻烦.

Also, I’m having trouble with having my nav icons have an active state on them.

我正在使用此代码:

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

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

But it only toggles the active and non active states. I want them to stay active only until you click on another nav item.

平板电脑问题:

另一方面，点击后，我在导航中的移动/平板电脑汉堡链接不会关闭导航.它只是保持打开状态.单击链接后，似乎无法触发关闭画布.

On another note, my mobile/tablet hamburger links in nav don’t close nav after clicked. It just stays open. I can’t seem to trigger the off canvas to close after clicking on a link.

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

I know this is a lot of information, but I’m stuck. If I need to provide more information, please let me know and i’ll post it.

谢谢！

推荐答案

快速回答第二个问题:

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处于非活动状态，然后使该div处于活动状态.

not quite sure how your divs and css are set up here as it feels like it could be simpler somehow, but the main principle with this is to first make all of your .nodes a divs inactive and then make this one active.

对于第三个问题，这有点麻烦，但是要避免与您的offCanvas脚本干涉，您可以在单击菜单div时触发对汉堡包的单击:

for third problem, this is a bit of a hack but to avoid meddling with your offCanvas script you can trigger a click on the hamburger when a menu div is clicked:

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

希望会有所帮助，必须运行，但如果没有其他人愿意，则会回来并尝试主要的.

hope that helps, gotta run but will come back come back and attempt the main one if no one else does.

这篇关于无法通过画布菜单/内容实现锚点平滑滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！