HTML: Как сделать отступ при скролле к якорю

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

Смотреть пример якорных ссылок
Содержание:

Заголовок 1

Белки (англ. — «protein») — важная составляющая организма. Они входят в структуру большинства тканей, а так же в соединительную и костную. Белки (они же «протеины») участвуют во многих процессах организма, являясь ферментами. Телу необходимо постоянное пополнении протеинов, которые занимают место погибших клеток или поврежденных тканей. Также от них зависит рост и развитие организма. 10-35 % калорий дневного рациона должны поступать из белковой пищи.

Заголовок 2

Советы по употреблению белков
Потреблять дневную норму для организма.
Не злоупотреблять белком в течение длительного периода.
Не принимать пищу с высоким содержанием белка на ночь.
Сочетать протеины растительного и животного происхождения. Это улучшит их усвоение. Животные белки должны составлять 50% дневного рациона.
Для выведения продуктов белкового обмена необходимо намного больше воды, чем для расщепления и переработки остальных компонентов пищи. Для недопущения обезвоживания нужно выпивать 1,5-2 литра в день жидкости. Спортсменам рекомендуется 3 л воды для поддержания водно-солевого баланса.
Перед тренировкой для преодоления больших нагрузок рекомендуется принимать насыщенный белком протеиновый коктейль.

Заголовок 3

Яичный белок — эталон среди белков, т.к. он имеет наивысшую усвояемость. В состав желтка входят овомукоид, овомуцин, лизоцин, альбумин, овоглобулин, коальбумин, авидин, а белковой составляющей является альбумин. Не рекомендуется употреблять куриные яйца в сыром виде людям с нарушениями пищеварительного тракта, потому что плохо усваивается и выводится наружу. Скорость абсорбции — 9 г/ч. Показатели аминокислотного состава — высокие. Способствует снижению массы тела.

Пример якорных ссылок

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

Код 1: Отступ якорного элемента при скролле с помощью scroll-margin-top

Решение 2. Другой вариант — использование для элемента с якорем положительный верхний внутренний отступ и отрицательный верхний внешний отступ, как в Коде №2:

Код №2: Отступ якорного элемента при скролле с помощью padding и margin
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии