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

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

也许这就是你要找的。 就我而言，当我单击菜单链接时，我被定位到我需要的部分，但由于我将标题固定在顶部，因此我的部分已被覆盖。 所以我在第一节中添加了 id="about-anchor" 并将其样式设置为相对位置和顶部 -85px；

详见代码sn-ps。

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>