当我单击锚点时添加偏移 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

也许这就是您所寻找的。 就我而言，当我单击菜单链接时，我被定向到我需要的部分，但由于我将标题固定在顶部，所以我的部分已被覆盖。 所以我在第一部分添加了 id="about-anchor" 并使用相对位置和顶部 -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>

Answer 2

您可以使用应用于目标 div 的 CSS 规则：scroll-margin-top:100px;

它将在目标 div 顶部添加 100px 的边距。