Привязка ссылки к div на той же странице не работает в Safari

avatar
Steven Lengieza
9 августа 2021 в 00:54
545
2
4

У меня есть веб-сайт на основе React, который включает этот список ссылок вверху каждой страницы:

<ul>
    <li><a href="/">HOME</a></li>
    <li><a href="/about-us">ABOUT US</a></li>
    <li><a href="/#contactSection">CONTACT US</a></li>
</ul>

Внизу главной страницы у меня есть этот фрагмент HTML:

<section id="contactSection" className="contactSection ptb_100">
    <h2>Contact Us</h2>
    ...HTML FORM...
</section>

Когда я нажимаю ссылку «Свяжитесь с нами» в верхней части главной страницы, Chrome прокручивается до правильного HTML-кода, указанного contactSection, однако Safari прокручивается до верхней части страницы. Когда я щелкаю ссылку «Свяжитесь с нами» на другой странице сайта или ввожу #contactSection в адресную строку и нажимаю Enter, Safari правильно прокручивается.

Я просмотрел темы, предлагающие добавить / в href, но это не сработало. Есть предложения?

ОБНОВЛЕНИЕ Причиной проблемы был липкий заголовок в верхней части страницы, из-за которого Safari удерживал страницу вверху. Удаление липкого заголовка решило проблему, хотя и не знаю почему.

Источник
ed2
9 августа 2021 в 01:03
0

Учитывая предыдущую косую черту, он ищет #contactSection в корневом каталоге, а не на текущей странице? (при условии, что текущая страница не является домашней). Или у вас есть функция scrollspy, загруженная на эту страницу, и/или элементы с фиксированным положением (например, липкое меню)?

Steven Lengieza
10 августа 2021 в 02:35
0

Ссылка работает, если щелкнуть ее с любой страницы, кроме домашней страницы, которая также является страницей, содержащей #contactSection.

Ответы (2)

avatar
Ridvan Sumset
19 февраля 2022 в 07:11
0

Попробуйте это. В HTML

<li><span onclick="scrollToElement('#contactSection')">CONTACT US</span></li>

и в JS

function scrollToElement(id) {
  const el = document.querySelector(id);

  if (el) {
    el.scrollIntoView();
  }
}
avatar
rens
9 августа 2021 в 01:45
2

Не следует добавлять "/" для ссылок с одинаковым идентификатором страницы

html {
  scroll-behavior: smooth;
}

#myDiv {
  /* To enable scroll */
  margin-top: 3000px;

  /* Extras (Not required) */
  padding-bottom: 2em;
  background: red;
}
<a href="#myDiv">
    Click mo to go to myDiv!
</a>

<div id="myDiv">This is myDiv</div>
rens
9 августа 2021 в 01:45
0

Это не имеет ничего общего с React

Steven Lengieza
10 августа 2021 в 02:26
0

Так что мне нужно проверить текущую страницу, чтобы определить, должен ли я добавить /? Ссылка должна быть действительна на всех страницах веб-сайта, включая домашнюю страницу, на которую она ведет.

Steven Lengieza
10 августа 2021 в 02:52
0

Обновление: я попытался удалить /, чтобы HTML просто использовал #contactSection, но это все равно не сработало. Я вижу, что ваш пример работает, когда я запускаю его в Safari, поэтому элемент, который я пытаюсь прокрутить, должен быть div? Или есть какие-то другие требования к элементу, на который я пытаюсь сослаться?

rens
14 августа 2021 в 04:20
0

@StevenLengieza Может быть, это объясняет ваш вопрос