Javascript смещение прокрутки на странице - PullRequest
Новая
       21

Javascript смещение прокрутки на странице

0 голосов
/ 16 января 2020

Это скорее вопрос решения проблемы. Я пытаюсь использовать встроенную прокрутку на странице, которую дают браузеры, чтобы позволить мобильным пользователям быстрее переходить к нужному контенту.

Проблема в том, что у меня на странице есть липкий заголовок, поэтому при использовании нативного <a id="section1"></a>, посещение #section1 означает, что позиция прокрутки находится за липким заголовком.

Есть ли способ, используя обычный JS (или даже CSS, если возможно!), Сместить позицию прокрутки на количество пикселей? Или есть более элегантное JS решение для этого, которое будет работать в IE11, Edge, Chrome & FF? 

<header> ... </header> <!-- site-wide sticky header using position: sticky -->
<main>
  <nav> <!-- page-specific sticky nav using position: sticky (placed under <header />) -->
    <a href="#top">Top</a>
    <a href="#bottom">Bottom</a>
  </nav>
  <div class="content">
    <section>
      <a id="top"></a>
      ...
      ...
      ...
    </section>
    ...
    <section>
      <a id="bottom"></a>
      ...
      ...
      ...
    </section>
  </div>
</main>

1 Ответ

0 голосов
/ 16 января 2020

Если вы знаете высоту заголовков, вы можете изменить top якоря, как показано ниже: 

header {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
  background: yellow;
  width: 100%;
  height: 40px;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 40px; /* required */
  background: red;
  width: 100%;
  height: 20px;
}

section > a {
  position: relative;
  top: -60px;
}

section > div {
  height: 500px;
  width: 100%;
}

#topDiv {
  background: blue;
}

#bottomDiv {
  background: green;
}
<header> ... </header> <!-- site-wide sticky header using position: sticky -->
<main>
  <nav> <!-- page-specific sticky nav using position: sticky (placed under <header />) -->
    <a href="#top">Top</a>
    <a href="#bottom">Bottom</a>
  </nav>
  <div class="content">
    <section>
      <a id="top"></a>
      <div id="topDiv" style="height: 500px; width: 100%" >
        Content
      </div>
    </section>
    <section>
      <a id="bottom"></a>
      <div id="bottomDiv" style="height: 500px; width: 100%" >
        Content
      </div>
    </section>
  </div>
</main>
...