Как сделать смещение от якорной ссылке

Question

Есть страница с статическим хедером поверх всех элементов. И есть TOC панель для навигации по заголовкам.

Но после нажатия на "якорь" - элемент на который происходит переход оказывается в самому верху экрана и прячется под статическим хедером.

Можно ли как-то задать отсуп для якорной ссылки? К примеру чтобы было +10mm вниз/вверх к точке переадресации по ссылке - после нажатия на неё? Можно ли как-то добиться желаемого без JS?

Answer 1

Решение: element - элемент позиция которого будет использована для отступа Думаю небольшой рефакторинг кода и его можно заточить под свои задачи

function onItemClick(elementId) {
    try {
        var element = document.getElementById(generatedId.id);

        if (element == null) {
            return;
        }

        window.setTimeout(function() {
            window.scrollTo(0, element.offsetTop - 44);
        }, 1);   //we need delay to execute this block AFTER <a href="#.."> will be executed
    }
    catch(ex) {
        console.log(ex);
    }
}

Answer 2

scroll-margin-top - поддержка более 93%

Пример

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 20rem;
  background-color: #000;
  display: flex;
  flex-direction: column;
  z-index: 99;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  padding: 2rem 0;
}

nav>ul {
  padding-left: 0;
}

nav a {
  display: block;
  color: #fff;
  padding: 1rem 2rem;
  width: 100%;
}

main {
  padding-left: 20rem;
}

section {
  font-size: 2rem;
}

.topbar {
  position: sticky;
  top: 0;
  left: 0;
  min-height: 4rem;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  background-color: #ddd;
  border: 1px solid #000;
}

.block {
  min-height: calc(100vh - 4rem);
  border: 2px solid #f00;
  scroll-margin-top: 4rem;
}

<nav>
  <ul>
    <li><a href="#s1">Section 1</a>
      <ul>
        <li><a href="#s1-1">Section 1.1</a></li>
        <li><a href="#s1-2">Section 1.2</a></li>
      </ul>
    </li>
    <li><a href="#s2">Section 2</a>
      <ul>
        <li><a href="#s2-1">Section 2.1</a></li>
        <li><a href="#s2-2">Section 2.2</a></li>
      </ul>
    </li>
    <li><a href="#s3">Section 3</a>
      <ul>
        <li><a href="#s3-1">Section 3.1</a></li>
        <li><a href="#s3-2">Section 3.2</a></li>
      </ul>
    </li>
  </ul>
</nav>

<main>
  <section id="s1">
    <div class="topbar">Section 1</div>
    <div class="block" id="s1-1">Section 1.1</div>
    <div class="block" id="s1-2">Section 1.2</div>
  </section>
  <section id="s2">
    <div class="topbar">Section 2</div>
    <div class="block" id="s2-1">Section 2.1</div>
    <div class="block" id="s2-2">Section 2.2</div>
  </section>
  <section id="s3">
    <div class="topbar">Section 3</div>
    <div class="block" id="s3-1">Section 3.1</div>
    <div class="block" id="s3-2">Section 3.2</div>
  </section>
</main>

БЛОГ НА HUSL

Как сделать смещение от якорной ссылке

Ответы (2 шт):