当我点击一个锚点时添加偏移 Y“-100px”，它会将我向下滚动到一个元素

Question

I need to add an offset of -100px when I click on a link that scrolls me down to a section. I have managed to make my scroll smooth, but i cannot make it to scroll with offsetY.

Here is my js code:

const links = document.querySelectorAll("a");

for (const link of links) {
  link.addEventListener("click", clickHandler);
}

function clickHandler(e) {
  e.preventDefault();
  const href = this.getAttribute("href");
  const offsetTop = document.querySelector(href).offsetTop;

  scroll({
    top: offsetTop,
    behavior: "smooth",
  });
}

... and here is my html:

<a href ="#mysection">Go to section </a>
<p>this is some lorem</p>
<p>this is some lorem</p>
<p>this is some lorem</p>

<div id ="mysection"> The section that appears when i click on the anchor. I want an offset on this div so that when i click on anchor, it wil scroll me at the beggining of this section </div>

Answer 1

Maybe thats what you looking for. In my case, when I clicked on menu link I was dericted to section I need, but since I have Header fixed on top, my section have been covered. So I added to my section one with id="about-anchor" and styled it with position relative and top -85px;

See code snippets for details.

 html { scroll-behavior: smooth; background: black; color: white; } section { border: 2px solid red; } #hero-qnchor, #about-qnchor, #contact-anchor { display: block; position: relative; top: -85px; } nav { position: fixed; width: 100%; background: white; border: 1px solid red; } nav ul { display: flex; justify-content: right; padding: 0 20px; list-style: none; } nav a { text-decoration: none; color: #333; font-size: 1.5rem; padding: 5px 10px; margin-right: 20px; transition: color 200ms ease, background-color 200ms ease; }

 <div> <nav> <ul> <a href="#hero-qnchor"> <li>Hero</li> </a> <a href="#about-qnchor"> <li>About</li> </a> <a href="#contact-anchor"> <li>Contact</li> </a> </ul> </nav> <section id="hero"> <div id="hero-qnchor"></div> <p className="about-wrapper__info-text"> Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero Hero </br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>. </p> </section> <section id="about"> <div id="about-qnchor"></div> <p className="about-wrapper__info-text"> About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About </br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>. </p> </section> <section id="contact"> <div id="contact-anchor"></div> <p className="about-wrapper__info-text"> Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact </br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br>. </p> </section> </div>