Как сделать отступ сверху при скроле к якорю?
Есть обычный скрипт на жс который делает плавную прокрутку к якорю
const anchors = document.querySelectorAll('a[href*="#"]') for (let anchor of anchors) { anchor.addEventListener('click', function (e) { e.preventDefault() const blockID = anchor.getAttribute('href').substr(1) document.getElementById(blockID).scrollIntoView({ behavior: 'smooth', block: 'start' }) }) } |
const anchors = document.querySelectorAll('a[href*="#"]') for (let anchor of anchors) { anchor.addEventListener('click', function (e) { e.preventDefault() const blockID = anchor.getAttribute('href').substr(1) document.getElementById(blockID).scrollIntoView({ behavior: 'smooth', block: 'start' }) }) }
При прокрутке до блока фиксированая шапка налегает сверху на часть блока нужно чето дописать в этот скрипт чтоб сверху был какой-то отступ чтоб шапка не закрывала блок
Дополнительно:
Ответы:
https://developer.mozilla.org/en-US/docs/Web/CSS/s...
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать отступ сверху при скроле к якорю, вам нужно добавить немного дополнительного CSS.
Ваша HTML разметка с якорем будет выглядеть примерно так:
<a name="anchor"></a> <div id="content"> <!-- Ваш контент здесь --> </div>
Теперь добавим CSS для создания отступа при скроле к якорю:
#content { padding-top: 50px; /* Выберите нужную вам величину отступа */ margin-top: -50px; /* Обратите внимание, что значение равно отрицательной величине padding-top */ } /* Для плавного скрола добавьте следующий CSS */ html { scroll-behavior: smooth; } /* А также добавьте этот CSS для якоря */ a[name] { display: block; position: relative; top: -50px; /* Здесь также указывается значение отрицательного отступа, чтобы компенсировать padding-top */ visibility: hidden; }
Теперь, когда вы будете скролить к якорю, страница будет плавно опускаться на указанное количество пикселей сверху, создавая отступ. Не забудьте настроить значение отступа в соответствии с вашим дизайном.