Задача. Есть блок с содержанием в статье. Оглавления в виде ссылок ссылаются на якоря в соответствующих заголовках, например ссылка <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
(применяется к целевому элементу):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
Содержание: <ul> <li><a href="#id-1">Заголовок 1</a></li> <li><a href="#id-2">Заголовок 2</a></li> <li><a href="#id-3">Заголовок 3</a></li> </ul> <h2 id="id-1">Заголовок 1</h2> <p>Белки (англ. — «protein») — важная...</p> <h2 id="id-2">Заголовок 2</h2> <p>Советы по употреблению...</p> <h2 id="id-3">Заголовок 3</h2> <p>Яичный белок - ...</p> <style> :taget { scroll-margin-top: 2rem; } /* или h2 вместо :target */ </style> |
Решение 2. Другой вариант — использование для элемента с якорем положительный верхний внутренний отступ и отрицательный верхний внешний отступ, как в Коде №2:
1 2 3 4 5 6 7 8 9 10 11 |
<style> :taget { padding-top: 50px; margin-top: -50px; } /* или h2 вместо :target */ </style> |
огромное спасибо целый день искал и второе решение помогло