Якорное меню внутри блока прокрутки работает некорректно. ⇐ CSS

[Гость]

Существует jQuery-код, который анимирует плавный переход от пунктов меню к привязкам. По первым пунктам меню, которые сразу видны, все работает нормально. А вот из тех пунктов меню, до которых нужно пролистать, переход осуществляется некорректно (чтобы увидеть проблему, код нужно запускать небольшим фрагментом, а не разворачивать на весь экран):

Код: Выделить всё

$('.main-nav a').on('click',function(e){
e.preventDefault();
let elementClick = $(this).attr('href');
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;
}

Код: Выделить всё

header


[url=#one]1. One[/url]
[url=#two]2. Two[/url]
[url=#three]3. Three[/url]
[url=#four]4. Four[/url]
[url=#five]5. Five[/url]
[url=#six]6. Six[/url]
[url=#seven]7. Seven[/url]
[url=#eight]8. Eight[/url]
[url=#nine]9. Nine[/url]

One
Two
Three
Four
Five
Six
Seven
Eight
Nine

footer

Очевидно, проблема связана с переменной `destination`. Но я не знаю, как его правильно посчитать для всех пунктов меню.

Подробнее здесь: https://stackoverflow.com/questions/781 ... -correctly