Как кастомизировать scroll по якорю в HTML?

Question

Проблема в следующем: если делать через id='n' <a href='#n'>, то у меня начало текста перекрывается статичным header (1-я картинка - как надо, 2-я - как выходит). Можно ли пролистнуть страницу чуть-чуть выше чем через id и ссылку?

    <p class="article-head" id="menu-1.1"><strong>История города</strong></p>
        <article>
            <p>Одним из красивейших городов России, несомненно, является Санкт-Петербург. Его также считают одним из красивейших городов мира, из – за его расположение в красивой природной зоне и его архитектуры. 
Город получил прозвище «Северной Венецией», т.к. вода играет большую роль в жизни города. Похожих городов в мире 3 — Венеция, Сидней и Санкт-Петербург.</p>
            <p>ну и т.д.</p>
            
        </article>



<a href="#menu-1.1">История города</a>

Answer 1

Современные браузеры (включая Edge, но не IE) достаточно хорошо поддерживают CSS свойство scroll-margin-top: https://caniuse.com/?search=scroll-margin-top

скриншот

Описание на developer.mozilla.org:

The scroll-margin-top property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

Вот короткая статья на английском: How to prevent anchor links from scrolling behind a sticky header with one line of CSS

И вот демо из этой статьи: https://codepen.io/cferdinandi/pen/GRJvozN

/**
 * Layout
 */
body {
    margin: 0 auto;
    max-width: 40em;
    width: 88%;
}

.section {
    color: #ffffff;
    height: 75vh;
    margin: 0;
  scroll-margin-top: 1em;
}

#a { background-color: #0074d9; }
#b { background-color: #2ecc40; }
#c { background-color: #ff851b; }
#d { background-color: #b10dc9; }

h2 {
    margin: 0;
    padding: 0;
}

/**
 * Sticky navigation
 */
.sticky {
    background-color: #ffffff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

/**
 * Display lists on a single line.
 * @bugfix Prevent webkit from removing list semantics
 * 1. Add a non-breaking space
 * 2. Make sure it doesn't mess up the DOM flow
 */
.list-inline {
    list-style: none;
    margin-left: -0.5em;
    margin-right: -0.5em;
    padding: 0;
}

.list-inline > li {
    display: inline-block;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.list-inline > li:before {
    content: "\200B"; /* 1 */
    position: absolute; /* 2 */
}

<h1>Scroll Margin</h1>

<nav class="sticky">
    <ul class="list-inline">
        <li><a href="#a">Section A</a></li>
        <li><a href="#b">Section B</a></li>
        <li><a href="#c">Section C</a></li>
        <li><a href="#d">Section D</a></li>
    </ul>
</nav>

<main>

    <article class="section" id="a"><h2>Section A</h2></article>
    <article class="section" id="b"><h2>Section B</h2></article>
    <article class="section" id="c"><h2>Section C</h2></article>
    <article class="section" id="d"><h2>Section D</h2></article>
</main>

Answer 2

$("a").click(function(e){
  var $anchor = $(this);
  $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
  }, 1500);
  e.preventDefault()});

Используй этот js для решения своей проблемы, чтобы не усложнять ничего...

БЛОГ НА HUSL

Как кастомизировать scroll по якорю в HTML?

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