Некорректно работает якорное меню внутри блока со скроллом
UPD Запускать примеры кода нужно в маленьком размере, на всю страницу не разворачивать. Проблема возникает именно тогда, когда не все пункты меню видны изначально, и до них нужно скроллить мышкой.
Есть код на jQuery, который анимирует плавный переход к якорям. Он корректно функционирует, когда скроллится вся страница, однако внутри блока со скроллом всё работает криво:
$('.main-nav a').on('click',function(e){
e.preventDefault();
let elementClick = $(this).attr('href');
let destination = $(elementClick).offset().top;
$('main').animate({ scrollTop: destination }, 1000);
});* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
font-size: 16px;
}
header, footer {
height: 20vh;
border: 1px solid maroon;
display: flex;
justify-content: center;
align-items: center;
}
main {
height: 60vh;
overflow: auto;
padding: 20px;
}
.main-nav {
display: flex;
flex-direction: column;
margin-bottom: 30px;
}
.main-nav a {
padding: 5px 0;
}
.content {
padding: 20px;
color: white;
height: 100vh;
}
#one, #four, #seven {
background-color: red;
}
#two, #five, #eight {
background-color: green;
}
#three, #six, #nine {
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<header>header</header>
<main>
<div class="main-nav">
<a href="#one">1. One</a>
<a href="#two">2. Two</a>
<a href="#three">3. Three</a>
<a href="#four">4. Four</a>
<a href="#five">5. Five</a>
<a href="#six">6. Six</a>
<a href="#seven">7. Seven</a>
<a href="#eight">8. Eight</a>
<a href="#nine">9. Nine</a>
</div>
<div class="content" id="one">One</div>
<div class="content" id="two">Two</div>
<div class="content" id="three">Three</div>
<div class="content" id="four">Four</div>
<div class="content" id="five">Five</div>
<div class="content" id="six">Six</div>
<div class="content" id="seven">Seven</div>
<div class="content" id="eight">Eight</div>
<div class="content" id="nine">Nine</div>
</main>
<footer>footer</footer>Понятно, что проблема с переменной destination. Пробовал рассчитывать её как расстояние от верха родителя до нужного блока. И для первых пунктов меню работает корректно. Но если поскроллить к нижним пунктам, то опять всё ломается:
$('.main-nav a').on('click',function(e){
e.preventDefault();
let elementClick = $(this).attr('href');
//let destination = $(elementClick).offset().top;
let destination = $(elementClick).offset().top - $(elementClick).parent().offset().top - $(elementClick).parent().scrollTop();
$('main').animate({ scrollTop: destination }, 1000);
});* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
font-size: 16px;
}
header, footer {
height: 20vh;
border: 1px solid maroon;
display: flex;
justify-content: center;
align-items: center;
}
main {
height: 60vh;
overflow: auto;
padding: 20px;
}
.main-nav {
display: flex;
flex-direction: column;
margin-bottom: 30px;
}
.main-nav a {
padding: 5px 0;
}
.content {
padding: 20px;
color: white;
height: 100vh;
}
#one, #four, #seven {
background-color: red;
}
#two, #five, #eight {
background-color: green;
}
#three, #six, #nine {
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<header>header</header>
<main>
<div class="main-nav">
<a href="#one">1. One</a>
<a href="#two">2. Two</a>
<a href="#three">3. Three</a>
<a href="#four">4. Four</a>
<a href="#five">5. Five</a>
<a href="#six">6. Six</a>
<a href="#seven">7. Seven</a>
<a href="#eight">8. Eight</a>
<a href="#nine">9. Nine</a>
</div>
<div class="content" id="one">One</div>
<div class="content" id="two">Two</div>
<div class="content" id="three">Three</div>
<div class="content" id="four">Four</div>
<div class="content" id="five">Five</div>
<div class="content" id="six">Six</div>
<div class="content" id="seven">Seven</div>
<div class="content" id="eight">Eight</div>
<div class="content" id="nine">Nine</div>
</main>
<footer>footer</footer>Очевидно, что в destination ещё надо как-то учитывать этот скролл к нижним пунктам. Но не могу понять, как это сделать. Буду благодарен за помощь.