Главная » Программирование » HTML: Как сделать отступ при скролле к якорю

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
    5 1 голос
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

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

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