當我點擊一個錨點時添加偏移 Y“-100px”，它會將我向下滾動到一個元素

Question

當我單擊將我向下滾動到某個部分的鏈接時，我需要添加 -100px 的偏移量。 我已經設法讓我的滾動平滑，但我不能讓它用 offsetY 滾動。

這是我的js代碼：

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",
  });
}

...這是我的 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

也許這就是你要找的。 就我而言，當我單擊菜單鏈接時，我被定位到我需要的部分，但由於我將 Header 固定在頂部，因此我的部分已被覆蓋。 所以我在第一節中添加了 id="about-anchor" 並使用 position relative 和 top -85px;

有關詳細信息，請參閱代碼片段。

 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>