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.

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.

I’m using this code:

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.

Tablet problem:

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.

Thanks!

回答1:

quick one for your second problem:

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

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.

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.

来源：https://stackoverflow.com/questions/39494904/cant-implement-anchor-smooth-scrolling-with-off-canvas-menu-content

标签

javascript

jquery

html

smooth-scrolling

off-canvas-menu