Как позиционировать якорь на странице при прокрутке через "data-bs-spy"?
Всем привет.
Делаю плавную прокрутку по странице в Bootstrap v5 верстке. Не могу понять, как он вообще работает, если честно, мне показалось как-то не так, или я не так его настроил... У меня есть верстка (лендинг), достаточно большой, чтобы сюда кидать пример кода. Я проставил якоря, загружаю страницу, кликаю по ссылке из navbar происходит прокрутка, и якорь не появляется на экране, а располагается прямо под ним, т.е. если колесиком спуститься, то сразу появляется нужный блок. Дальше, не обновляя страницу, поднимаю в самый верх, снова кликаю по этой же ссылке на нужный мне блок, и теперь всё нормально, скролит так, что нужный блок становится в верхней части экрана... Понятия не имею почему так происходит, может кто сталкивался и подскажет. И тут же следующий вопрос, как сделать так, чтобы при скроле, нужный блок вставал не внизу экрана, не сверху экрана а по середине? Можно так сделать?
Коротко как сделал я...
// css
html {
scroll-behavior: smooth;
}
...
// Navbar
<nav id="navbar_top_menu" class="navbar">
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li class="nav-item"><a href="#section1" class="nav-link px-2">Section1</a>/li>
<li class="nav-item"><a href="#section2" class="nav-link px-2">Section2</a></li>
<li class="nav-item"><a href="#section3" class="nav-link px-2">Section3</a></li>
</ul>
</nav>
// HTML - Body
<body data-bs-spy="scroll" data-bs-target="#navbar_top_menu" tabindex="0">
.....
<div id="section1">....</div>
...
<div id="section2">....</div>
...
<div id="section3">....</div>
...
</body>