Highlight active anchor links with smooth scroll

Question

I'm using the smooth scroll script along side the simple JQuery for add and remove classes for anchor links.

But both working separately but when you put them together the anchor highlight doesn't work.

Here is the code

var $navyyLi = $(".navyy li");

$navyyLi.click(function() {
  $navyyLi.removeClass('highlight')
  $(this).addClass('highlight');
});

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

JSFIDDLE

Answer 1

One listener expects the click on a li , the other listener expects click on the a .

So I changed to the click on the a to do the highlighting as well:

$(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) {
                //at this point they will only highlight if clicked anchor is valid to be scrolled
                $(".navyy li").removeClass('highlight'); //<---Remove from all li
                $(this).parents('li').addClass('highlight'); //<---Add the class to the parent li of the clicked anchor
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Fiddle: http://jsfiddle.net/hLeQy/100/ In this change, I made to highlight ONLY if anchor is valid, not when any anchor is clicked.

If you want to highlight even if anchor is not valid to be scrolled, change the two lines to be the first of the click listener.

$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        $(".navyy li").removeClass('highlight'); //<---Remove from all li
        $(this).parents('li').addClass('highlight'); //<---Add the class to the parent li of the clicked anchor

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