4

Ситуация такова:

  1. Переходим на какую-нибудь ссылку с #якорем
  2. Якорь изменился, hashchange сработал как положено, браузер докрутил до элемента с данным id
  3. Прокручиваем страницу куда-нибудь
  4. Ставим фокус на адресную строку (в которой написан #якорь из пункта 1) и просто тыкаем Enter
  5. Очевидно, якорь не изменился, и hashchange не сработал
  6. Но браузер всё равно докрутил до элемента с данным id!

Проблема в том, что на сайте фиксированная шапка вверху страницы, и, когда браузер прокручивает страницу к элементу по #якорю — этот элемент прячется под шапкой. Мне нужно отловить событие и прокрутить страницу вверх на сотню пикселей, чтоб элемент вылез из-под шапки, но якорь не всегда меняется.

Если hashchange не всегда срабатывает, можно ли как-то ещё отловить событие прокрутки страницы к якорю?


Кстати, проблему очень легко воспроизвести прямо на Stack Overflow:

  1. Допишите к адресу #mainbar — страница докрутится к началу текста вопроса.
  2. Ткните Enter в адресной строке, не изменяя адрес (#mainbar должен остаться) — текст вопроса уедет под шапку!

Видео с демонстрацией (см. комментарии в консоли): https://www.youtube.com/watch?v=7bTqC97gRnA


UPD: обнаружил, что в современных браузерах появилось CSS-свойство scroll-padding-top, которое позволяет решить продемонстрированную выше проблему с шапкой и прокруткой.

Тем не менее, поскольку вопрос изначально не про прокрутку, а про отлов события hashchange — он всё ещё актуален.

2
  • Не вариант ли отслеживать положение прокрутки на странице? Делали сайт, где нужно было отслеживать положение шапки и либо выводить её краткий вариант, либо развернутый. Чтобы избежать промежуточных вариантов — смотрели за положением скролла страницы по вертикали. Соответственно, вы также можете немного поднимать страницу, если браузер простоял 150мс в зоне, скрывающей нужный вам контент.
    – sirWill
    8 июл 2018 в 19:52
  • @sirWill а как надёжно отличить переход по якорю от просто прокрутки? Ведь если пользователь сам покрутил колёсико мыши, то не нужно за него решать (а при переходе по якорю страница в отдельных случаях может прокрутиться всего на несколько пикселей, что весьма похоже на прокрутку колёсиком)
    – andreymal
    8 июл 2018 в 21:27

3 ответа 3

1

Спасибо за комментарий) Он навел меня на решение: Чтобы корректировать прокрутку на странице нужно отслеживать несколько условий для всевозможных сценариев они будут следующие:

1 вариант — отслеживать не изменения в строке URL, а клик по ссылкам с якорем. При таком подходе открутка произойдет даже в случае, если уже был клик по этому якорю и он есть в URL страницы.

$('[href="#anchorname"]").on('click', ...);

2 вариант — нажатие Enter в адресной строке приводит к перезагрузке страницы. И тут всё просто — смотрим событие загрузки страницы, проверяем есть ли в адресе якорь и откручиваем в нужное место для этого якоря.

12
  • Нет, при нажатии Enter в адресной строке с якорем страница не перезагружается (иначе проблемы бы не было)
    – andreymal
    9 июл 2018 в 9:37
  • Это в каком браузере по нажатию Enter в строке браузера не происходит перезагрузки? В Chrome/Safari пробую — перегружает полностью страницу, при этом неважно добавлен якорь или нет.
    – sirWill
    10 июл 2018 в 12:40
  • На случай загрузки страницы по нажатию Enter в строке браузера из кеша, что, возможно, происходит без полной перезагрузки страницы (хотя на мой взгляд это оч странное поведение, которое я не замечал) можно отлавливать событие onpageshow тега body.
    – sirWill
    10 июл 2018 в 12:58
  • 1
    Воть youtube.com/watch?v=7bTqC97gRnA
    – andreymal
    10 июл 2018 в 13:36
  • 1
    @andreymal Наезжать надо. Потому что если я нажимаю на enter в адресной строке, я ожидаю, что страница будет перезагружена. А то развели ромашку - якорь есть - не перегружаем, якоря нет - перегружаем. 3 июл 2019 в 7:00
1

Не надо ничего обрабатывать. И вообще не надо пихать скрипты туда, где вполне достаточно стилей. Надо просто элементам с id прописать правильно отступы (значение 32px - это высота фиксированной шапки):

section { padding-top: 32px; margin-bottom: -32px; }
section:last-child { margin-bottom: 0; }

А вот пример полностью:

* { box-sizing: border-box; }
html, body, main { height: 100%; margin: 0; }
main { overflow: auto; }
nav { position: fixed; top: 0; left: 0; right: 16px; line-height: 32px; background: white; text-align: center; border-bottom: 1px solid; }
a { display: inline-block; padding: 0 .5em; }
a:hover { background: silver; }
section { padding-top: 32px; margin-bottom: -32px; }
section:last-child { margin-bottom: 0; }
h1 { margin: 16px 0; background: antiquewhite; }
<nav>
  <a href="#s1">1</a>
  <a href="#s2">2</a>
  <a href="#s3">3</a>
  <a href="#s4">4</a>
  <a href="#s5">5</a>
  <a href="#s6">6</a>
  <a href="#s7">7</a>
  <a href="#s8">8</a>
  <a href="#s9">9</a>
  <a href="#s10">10</a>
</nav>

<main>
  <section id=s1>
    <h1>1</h1>
    <p>Проблема в том, что на сайте фиксированная шапка вверху страницы, и, когда браузер прокручивает страницу к элементу по #якорю — этот элемент прячется под шапкой. Мне нужно отловить событие и прокрутить страницу вверх на сотню пикселей, чтоб элемент вылез из-под шапки, но якорь не всегда меняется.</p>
  </section>
  <section id=s2>
    <h1>2</h1>
    <p>Проблема в том, что на сайте фиксированная шапка вверху страницы, и, когда браузер прокручивает страницу к элементу по #якорю — этот элемент прячется под шапкой. Мне нужно отловить событие и прокрутить страницу вверх на сотню пикселей, чтоб элемент вылез из-под шапки, но якорь не всегда меняется.</p>
  </section>
  <section id=s3>
    <h1>3</h1>
    <p>Проблема в том, что на сайте фиксированная шапка вверху страницы, и, когда браузер прокручивает страницу к элементу по #якорю — этот элемент прячется под шапкой. Мне нужно отловить событие и прокрутить страницу вверх на сотню пикселей, чтоб элемент вылез из-под шапки, но якорь не всегда меняется.</p>
  </section>
  <section id=s4>
    <h1>4</h1>
    <p>Проблема в том, что на сайте фиксированная шапка вверху страницы, и, когда браузер прокручивает страницу к элементу по #якорю — этот элемент прячется под шапкой. Мне нужно отловить событие и прокрутить страницу вверх на сотню пикселей, чтоб элемент вылез из-под шапки, но якорь не всегда меняется.</p>
  </section>
  <section id=s5>
    <h1>5</h1>
    <p>Проблема в том, что на сайте фиксированная шапка вверху страницы, и, когда браузер прокручивает страницу к элементу по #якорю — этот элемент прячется под шапкой. Мне нужно отловить событие и прокрутить страницу вверх на сотню пикселей, чтоб элемент вылез из-под шапки, но якорь не всегда меняется.</p>
  </section>
  <section id=s6>
    <h1>6</h1>
    <p>Проблема в том, что на сайте фиксированная шапка вверху страницы, и, когда браузер прокручивает страницу к элементу по #якорю — этот элемент прячется под шапкой. Мне нужно отловить событие и прокрутить страницу вверх на сотню пикселей, чтоб элемент вылез из-под шапки, но якорь не всегда меняется.</p>
  </section>
  <section id=s7>
    <h1>7</h1>
    <p>Проблема в том, что на сайте фиксированная шапка вверху страницы, и, когда браузер прокручивает страницу к элементу по #якорю — этот элемент прячется под шапкой. Мне нужно отловить событие и прокрутить страницу вверх на сотню пикселей, чтоб элемент вылез из-под шапки, но якорь не всегда меняется.</p>
  </section>
  <section id=s8>
    <h1>8</h1>
    <p>Проблема в том, что на сайте фиксированная шапка вверху страницы, и, когда браузер прокручивает страницу к элементу по #якорю — этот элемент прячется под шапкой. Мне нужно отловить событие и прокрутить страницу вверх на сотню пикселей, чтоб элемент вылез из-под шапки, но якорь не всегда меняется.</p>
  </section>
  <section id=s9>
    <h1>9</h1>
    <p>Проблема в том, что на сайте фиксированная шапка вверху страницы, и, когда браузер прокручивает страницу к элементу по #якорю — этот элемент прячется под шапкой. Мне нужно отловить событие и прокрутить страницу вверх на сотню пикселей, чтоб элемент вылез из-под шапки, но якорь не всегда меняется.</p>
  </section>
  <section id=s10>
    <h1>10</h1>
    <p>Проблема в том, что на сайте фиксированная шапка вверху страницы, и, когда браузер прокручивает страницу к элементу по #якорю — этот элемент прячется под шапкой. Мне нужно отловить событие и прокрутить страницу вверх на сотню пикселей, чтоб элемент вылез из-под шапки, но якорь не всегда меняется.</p>
  </section>
</main>

6
  • Отрицательный маргин — яркий признак костыля. К тому же в моём случае высота шапки вообще динамическая :)
    – andreymal
    1 июл 2019 в 10:28
  • @andreymal, не всегда. А вот шапка с динамической высотой - это странно. А что если контейнер подвинуть?
    – Qwertiy
    1 июл 2019 в 12:00
  • Контейнер и так подвинут (и это пододвигание тоже обновляется джаваскриптом), но а толку, если браузер всё равно это учитывает и прокручивает якорь аккурат к верху окна браузера, игнорируя все шапки и пододвигания
    – andreymal
    1 июл 2019 в 12:04
  • (мечты-мечты: вот бы была возможность указать браузеру область видимости на странице, которая не перекрыта шапками, чтобы не только якоря, но и PageUp/PageDown корректно без костылей работали)
    – andreymal
    1 июл 2019 в 12:04
  • @andreymal, для этого вроде надо просто область скролла помеянть?
    – Qwertiy
    1 июл 2019 в 12:50
0

Вы не отследите это событие универсально, так как к примеру в Google Chrome при аналогичных действиях, по нажатию Enter в адресной строке - страница будет полностью перезагружена.

1
  • Зато во всех остальных браузерах - не будет. Там и надо отследить.
    – andreymal
    2 июл 2019 в 6:44

Ваш ответ

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

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