Click on navigation points and it does not activate the class

Question

Jsfiddle demo

$('a[href^="#"]').on('click', function(evt){
    var target = $($(this).attr('href'));
    console.log('target =>' + target);
    if(target.length){
      evt.preventDefault();
      $('html, body').animate(
      {scrollTop: target.offset().top}, 1000);
      $('a[href^="#"]').removeClass('active');
          $(this).addClass('active');
    }
  });


  $(window).scroll(function() {
      var windscroll = $(window).scrollTop();
      if (windscroll >= 20) {
          $('.section').each(function(i) {
              if ($(this).position().top <= windscroll - 5) {
                  $('.scrolling-navigation li a.active').removeClass('active');
                  $('.scrolling-navigation li a').eq(i).addClass('active');
                  console.log('top ' + $(this).position().top);
              }
          });

      } else {
          $('.scrolling-navigation li a.active').removeClass('active');
          $('.scrolling-navigation li a:first').addClass('active');
      }

  }).scroll();

There are two clicks and scrolling to display points with an active class that colors in black.

Scrolling up and down, points are set correctly and accordingly. But when I tried to click on a point, it is not configured correctly. Only it will be active if you double-click on the same point. In addition, the first point is correctly configured.

Why is it not installed in the active state if you click once on the second point?

Answer 1

, , , , . , @ .

Fiddle:

var offset = 20;

$('a[href^="#"]').on('click', function(evt){
    var target = $($(this).attr('href'));
    if(target.length){
        evt.preventDefault();
        $('html, body').animate(
            {scrollTop: target.offset().top}, 1000);
    }
});

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= offset) {
        $('.scrolling-navigation').fadeIn();
        if(windscroll + $(window).height() == $(document).height()){
            $('.scrolling-navigation li a.active').removeClass('active');
            $('.scrolling-navigation li a').eq(1).addClass('active');
        }
        else{
            $('.section').each(function(i) {
                console.log('top ' + $(this).position().top);
                if ($(this).position().top <= windscroll) {
                    $('.scrolling-navigation li a.active').removeClass('active');
                    $('.scrolling-navigation li a').eq(i).addClass('active');
                }
            });
        }

    } else {
        $('.scrolling-navigation').fadeOut();
        $('.scrolling-navigation li a.active').removeClass('active');
        $('.scrolling-navigation li a:first').addClass('active');
    }

}).scroll();

, ​​ , , ( ) , , . , , , .

, :

click . "" , , , .

Answer 2

​​ - .

if ($(this).position().top <= windscroll - 5) {...

, 300 . ​​ 300, , (295 300).

-5, , .

, .

.

Answer 3

, , .

   $('.section').each(function(i) {
          if ($(this).position().top <= windscroll - 5) {
              console.log('top ' + $(this).position().top);
          }
      });

    <li><a href="#1" class="tooltip-left active" data-tooltip="Test 1"></a></li>
    <li><a href="#2" class="tooltip-left" data-tooltip="Test 2"></a></li>

, , .