0

Можно сделать ссылки якоря к другим блокам, но они работают если нажать именно на текст, который располагается в середине кнопки, нужно сделать чтоб при клике на кнопку был скролл до определённого блока.

2
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 15 ноя 2022 в 13:38
  • Привели бы вы уже пример вашей вёрстки. нет сил догадываться: как у вас реализованы кнопки? Если это ссылки - тег a, то просто сделайте их блочными - пропишите им display:block; ну и задайте размеры: ширину и высоту. Если у вас кнопки реализованы иначе, то так именно? Зачем нам догадываться?
    – Quazimorda
    15 ноя 2022 в 21:10

2 ответа 2

1

Добавьте

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>

3
  • Кажется, у вас работает как раз только при нажатии на текст ссылок. Это натурально не то, чего хотел автор вопроса. Но я бы не торопился с ответом, пока он не покажет свои попытки сверстать самостоятельно :))
    – Quazimorda
    15 ноя 2022 в 21:12
  • @Quazimorda - для кнопок также добавлен padding, из за этого область для клика увеличена.
    – soledar10
    16 ноя 2022 в 11:12
  • Я прописал padding во всю ширину кнопки(div)
    – Artem
    20 ноя 2022 в 3:37
0

Нужно прописать padding текста во всю ширину кнопки(div)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.