滚动到在JavaScript/HTML中不能正常工作的项目

Question

在我的代码中，我有一个横幅和下面我有一个标题，我正在修复当我到达标题像这样

const nav = document.querySelector("#header");
const topOfNav = nav.offsetTop;
function fixNav() {
if (window.scrollY >= topOfNav) {
document.body.style.paddingTop = nav.offsetHeight + "px";
document.body.classList.add("nav-is-stuck");
} else {
document.body.style.paddingTop = 0;
document.body.classList.remove("nav-is-stuck");
}
}
window.addEventListener("scroll", fixNav);

现在我的另一个要求是，当我点击菜单项时，我想到达该部分的顶部。为此，我编写了以下代码

document.addEventListener("click", function (event) {
if (!event.target.matches(".navigation__list--link")) return;
event.preventDefault();
const id = event.target.getAttribute("href").replace("#", "");
const element = document.getElementById(id);
console.log(element);
element.scrollIntoView({
behavior: "smooth",
});
});

问题是，当我点击菜单项时，它没有进入部分的开始，但我的一些部分在标题后面。

当我点击最后一段的时候它不会跳转到那一段的开始，也许是因为我在最后一段没有足够的空间(高度)?

不寻找jQuery解决方案

Answer 1

步骤1:-在标题菜单后执行步骤1

<div id="topid" style="display:none"> </div>

步骤2:现在只需调用隐藏div id从按钮或从任何你想要的地方。这样的

<a href="#topid">GO TO Top </a>