Почему метод top работает не так, как нужно?

Question

[Андрей Dobrin]

Допустим у меня есть код HTML:

<article>
   <div class="section" id="section__first">
</div>
    <div class="section" id="section__second">
</div>
    <div class="section" id="section__third">
</div>
<article>

<aside>
<ul class="section__menu">
    <li class="section__item"><a class="section__link section__link--active" href="#section__first">Первый</a></li>
    <li class="section__item"><a class="section__link" href="#section__second">Второй</a></li>
    <li class="section__item"><a class="section__link" href="#section__third">Третий</a></li>
</ul>
</aside>

И такой код CSS:
.section__link{
background-color: transparent;
color: white;
}

.section__link--active{
background_color: #0ad
color: black
}

И скрипт из интернета:

$(document).on("scroll", onScroll);

  $('a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    $(document).off("scroll");

    $('.section__link').each(function () {
      $(this).removeClass('section__active');
    })
    $(this).addClass('section__active');

    var target = this.hash,
    menu = target;
    $target = $(target);
    $('html, body').stop().animate({
      'scrollTop': $target.offset().top - 80
    }, 500, 'swing', function () {
      window.location.hash = target;
      $(document).on("scroll", onScroll);
    });
  });

  function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('.section__link').each(function () {
      var currLink = $(this);
      var refElement = $(currLink.attr("href"));
      if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('.section__link').removeClass("section__active");
        currLink.addClass("section__active");
      }
      else{
        currLink.removeClass("section__active");
      }
    });
  }

Мне нужно, чтоб при нажатии на элемент с классом .section__link, окно прокручивалось к соответсвенному объекту И ПРИ ЭТОМ она останавливалась сразу на позиции top - 80.
То есть, данный кусок кода:

$('html, body').stop().animate({
      'scrollTop': $target.offset().top - 80
    }, 500, 'swing'....

не останавливается на позиции top - 80, а на позиции top. Я запутался. Спасибо, вопрос объемный...

Answer 1

[Евгений]

из интернета: https://jsfiddle.net/cse_tushar/Dxtyu/141/