HTML: Как сделать отступ при скролле к якорю
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend #scroll_margin_top #taget
❓Задача. Есть блок с содержанием в статье. Оглавления в виде ссылок ссылаются н якоря в соответствующих заголовках, например ссылка <a href="#id-1">Заголовок 1</a> и заголовок <h2 id="id-1">Заголовок 1</h2>. Когда нажимаем на ссылку с заголовком, экран перемещается к заголовку с тегом h2 и якорем id=id-1. Экран установится так, что заголовок будет у самого верхнего края. Это не всегда хорошо выглядит. Например, если есть фиксированая, липкая шапка, то заголовок будет ею перекрываться. Поэтому лучше сделать чтобы был отступ от якоря при скролле к нему.

✅ Решение 1. Можно использовать в CSS свойство scroll-margin-top — задает высоту отступа, которую нужно использовать при скролле к элементу. Работает во всех современных браузерах, кроме IE-11 и ранних версиях. Пример в Коде №1? используем псевдокласс :target (применяется к целевому элементу):
:taget { scroll-margin-top: 2rem; }

✅ Решение 2. Другой вариант — использование для элемента с якорем положительный верхний внутренний отступ и отрицательный верхний внешний отступ:
:taget {
padding-top: 50px;
margin-top: -50px;
}
💾 https://wpcraft.top/?p=2683