Как сделать отступ при скроле страницы?

Question

[testkeyc]

На сайте сделал плавный скролл для блоков. На сайте используется верхнее плавающее меню и из-за этого при скролле до блока получается так, что оно наезжает на заголовки. Подскажите, как задать отступы при скролле в несколько пикселей от блока?

const anchors = document.querySelectorAll('a[href*="#"]');

for( let anchor of anchors) {
	anchor.addEventListener("click", function(e){
		e.preventDefault();
		const blockID = anchor.getAttribute('href')
		document.querySelector('' + blockID).scrollIntoView({
			behavior: "smooth",
			block: "start",
		})
	})
}

Comments

[WapSter]

.scrollIntoView() - не позволяет использовать расстояние в пикселях. Используй другой метод.

Answer 1

[Athanor]

Самый простой способ: сделать скролл в 2 шага и после scrollIntoView вызывать доскрол на нужное кол-во пикселей, типа такого

window.scrollBy({
  top: -10,
  left: 0,
  behavior: 'smooth'
}); //

Но если хотите плавности, вам придется, вероятно, отказаться от scrollIntoView, получать координаты верхушки вашего anchor, менять их на нужное кол-во пикселей и вызывать window.scrollTo, передавая туда координаты в параметр top

Добавил демо

Comments

[testkeyc]

Спасибо

Answer 2

[hzzzzl]

scroll-margin
https://developer.mozilla.org/en-US/docs/Web/CSS/s...

Answer 3

[mevCode]

Мне помогло https://webformyself.com/fiksirovannye-zagolovki-i...