venom1996,
смотрите, что у вас не так?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div{
height: 500px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(() => {
const scrollTo = (target, duration = 800) => {
if (!target) {
return;
}
const delta = $(window).width() < 768 ? 0 : $('.header-nav').outerHeight();
target = decodeURI(target);
$('html,body').animate({
scrollTop: $(`${target},a[name="${target.slice(1)}"]`).offset().top - delta
}, duration);
};
if (location.hash) {
scrollTo(location.hash);
}
$(document).on('click', '.header-nav__dropdown li a', function(e) {
const $this = $(this);
const hash = (this.href || '').split('#').pop();
if ($this.closest('.header-nav__list > ul > li').hasClass('isActive') || !hash) {
return;
}
e.preventDefault();
scrollTo('#' + hash);
$this.closest('.header-nav__dropdown').hide({
duration: 100,
complete: function () {
this.removeAttribute('style');
}
});
});
});
</script>
</head>
<body>
<header class="header-nav">header-nav</header>
<ul class="header-nav__dropdown">
<li><a href="#начало">Начало</a></li>
<li><a href="#наши-достижения">Наши достижения Click me!</a></li>
</ul>
<div id="начало">начало</div>
<div id="наши-достижения">наши-достижения</div>
</body>
</html>