平滑滚动以锚定滚动行为，但高于100px

Question

I'm trying to do smooth scroll effect to anchors on my page, but i need to scroll it 100px above because of sticky header. Don't want to use JQuery there. I have tried to add pseudoclass to block with anchor like this:

div:target:before {
  content: '';
  display: block;
  height: 100px;
  margin-top: -100px;
  visibility: hidden;
}

This didn't work, it overlaying block above. Then i've tried to scroll it by event listener:

window.addEventListener("hashchange", function () {
  window.scrollTo(window.scrollX, window.scrollY - 100);
});

It's working only without scroll-behavior property. Is there any solution? Thank you!

Answer 1

try replacing the

window.scrollTo(...)

with

document.getElementById('yourElemId').scrollIntoView({behavior: "smooth", block: "end"});

the yourElemId is the id of the element with the anchor.

Here is the documentation for scrollIntoView