Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Jeremy Coleman
Jeremy Coleman
5,449 Points

Smooth scroll conflict with responsive nav menu

My goal is for mobile users to click a menu item, and it works great until I add smooth scrolling to the website (this is a one page website). I am not familiar enough with JavaScript to find the issue (as I didn't write the smooth scroll script).

// This opens the navigation menu for mobile users and computers
$(function() {
    $('#open-nav').on('click', function() {
        $('#main-navigation').toggleClass('open');
    });
});

// This closes the navigation menu and sends the user to where they have clicked.
$(function() {
    $('.remove-nav').on('click', function() {
        $('#main-navigation').removeClass('open');
    });
});




// Smooth Scrolling

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

I am looking how to fix this or find an alternative, thank you in advance!

1 Answer

benfarnham
benfarnham
17,073 Points
benfarnham
benfarnham
17,073 Points

My only guess based off of what has been show is the competing click events between your smooth page scroll and your closing of the navigation upon click. I could be wrong but possibly try naming your smooth scrolling function, place it above your events to open your nav, and call the function when ".remove-nav" is clicked. Possibly something like: 

// Smooth Scrolling

function superSmoothScroll(){
  $('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;
      }
    }
  });
});

// This opens the navigation menu for mobile users and computers
$(function() {
    $('#open-nav').on('click', function() {
        $('#main-navigation').toggleClass('open');
    });
});

// This closes the navigation menu and sends the user to where they have clicked.
$(function() {
    $('.remove-nav').on('click', function() {
        $('#main-navigation').removeClass('open');
         superSmoothScroll();
    });
});

Haven't tested it so I could be wrong. Hope this helps though!

Jeremy Coleman
Jeremy Coleman
5,449 Points

This is all pretty much what is needed, the rest is just html classes which works fine without the smooth scrolling. Thank you though I'll give this a try!