Как учесть определенную высоту блока при проктуртке?

Question

[Александр Янк]

Есть плавающий фиксированный блок с меню, он перекрывает блок, к которому была прокрутка:

https://codepen.io/alex-lenk/pen/wQKvWL

$(document).ready(function() {
  $("a").on("click", function(event) {
    event.preventDefault();

    var hash = this.hash;

    $("html, body").animate(
      {
        scrollTop: $(hash).offset().top
      },
      800
    );
  });
});

<nav>Navigation</nav>

<div id="element"><a href="#element">Link</a></div>

body {
  height: 1000px;
  padding-top: 200px;
}
nav {
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: green;
}

Элемент, к которому была прокрутка перекрывает блок с зеленным фоном. Как решить данный нюанс?

Comments

[Амир Алимжанов]

#element {
position: relative;
z-index: 1;
}

[Александр Янк]

Амир Алимжанов, видимо вы не поняли вопрос, потому этот ответ не правильный.

[Амир Алимжанов]

Alex Lenk, да, вижу, ответ был простой, как раз что-то подобное недавно делал

Answer 1

[Александр Янк]

Нашел ответ:

$("body").on("click", '[href*="#"]', function(e) {
    var fixed_offset = 80;
    $("html,body")
      .stop()
      .animate(
        {
          scrollTop: $(this.hash).offset().top - fixed_offset
        },
        300
      );
    e.preventDefault();
  });
});