Как компенсировать фиксированный заголовок с помощью плавной прокрутки CSS?

#css #reactjs

#css #reactjs

Вопрос:

Я добавил плавную прокрутку через CSS с помощью этого кода —

 html {
  scroll-behavior: smooth;
}
  

Мой заголовок исправлен и имеет длину 75 пикселей. У меня есть ссылка с тегом привязки для перехода в другую часть страницы, но при нажатии на нее она уменьшается на 75 пикселей из-за заголовка.

Я знаю, что могу использовать jQuery для смещения на 75 пикселей, но это приложение React, и я бы предпочел по возможности избегать использования jQuery.

Есть ли способ компенсировать с помощью CSS?

Ответ №1:

Вы можете использовать scroll-margin-top в css:

 scroll-margin-top: -75px;