Можно сделать ссылки якоря к другим блокам, но они работают если нажать именно на текст, который располагается в середине кнопки, нужно сделать чтоб при клике на кнопку был скролл до определённого блока.
2 ответа
Добавьте
html {
scroll-behavior: smooth;
}
Пример
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
}
.navbar {
position: sticky;
top: 0;
left: 0;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
}
.navbar__link {
padding: .5rem 1rem;
color: #fff;
}
section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 10vw;
background-color: #ccc;
}
section:nth-of-type(even) {
background-color: #ddd;
}
<nav class="navbar">
<a href="#s1" class="navbar__link">Link 1</a>
<a href="#s2" class="navbar__link">Link 2</a>
<a href="#s3" class="navbar__link">Link 3</a>
<a href="#s4" class="navbar__link">Link 4</a>
</nav>
<section id="s1">Section 1</section>
<section id="s2">Section 2</section>
<section id="s3">Section 3</section>
<section id="s4">Section 4</section>
<footer>Footer</footer>
-
Кажется, у вас работает как раз только при нажатии на текст ссылок. Это натурально не то, чего хотел автор вопроса. Но я бы не торопился с ответом, пока он не покажет свои попытки сверстать самостоятельно :)) 15 ноя 2022 в 21:12
-
@Quazimorda - для кнопок также добавлен
padding
, из за этого область для клика увеличена. 16 ноя 2022 в 11:12 -
a
, то просто сделайте их блочными - пропишите имdisplay:block;
ну и задайте размеры: ширину и высоту. Если у вас кнопки реализованы иначе, то так именно? Зачем нам догадываться?