Javascript 滚动到带有for each循环的部分滚动到错误的部分

我在一个网站上工作，只有移动视图有点完整

我想有滚动到部分的功能，并可以使其工作，如果我分配一个单独的功能和事件侦听器到各个链接，但这将是重复的

菜单的标记为：

<nav class="menu">
    <ol>
        <li class="menu-item"><a href="#home" class="nav-item transition"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
        <li class="menu-item"><a href="#about" id="nav-about"><i class="fa fa-eye" aria-hidden="true"></i>Über uns</a></li>
        <li class="menu-item"><a href="#blog" ><i class="fa fa-commenting-o" aria-hidden="true"></i>Blog und Links</a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="#newsmedia" id="nav-news">Zeitungsartikel</a></li>
                <li class="menu-item"><a href="#history" id="nav-history">Geschichte des Taxigewerbes</a></li>
                <li class="menu-item"><a href="#worldwide" id="nav-worldwide">Taxis weltweit</a></li>
            </ol>
        </li>
        <li class="menu-item"><a href="#0"><i class="fa fa-comments" aria-hidden="true"></i>Social Media</a>
            <ol class="sub-menu">
                <li class="menu-item"><a class="transition" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                </li>
                <li class="menu-item"><a class="transition" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                </li>
                <li class="menu-item"><a class="transition" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
            </ol>
        </li>
        <li class="menu-item"><a href="#contact" id="nav-contact"><i class="fa fa-envelope-open-o" aria-hidden="true"></i>Kontakt</a></li>
    </ol>
</nav>

JS如下所示：

函数平滑滚动（targetElement）{
targetElement.scrollIntoView({
行为：“平滑”
});
}

这就是函数，目的是，它滚动到作为参数传入的元素。传递参数并调用

smoothScroll

函数的函数如下所示。首先，我将菜单项分配给变量，然后将目标节元素分配给变量

let-about=document.querySelector（'nav-about'）；
let news=document.querySelector（“#nav news”）；
让history=document.querySelector（“#nav history”）；
let worldwide=document.querySelector（“#nav worldwide”）；
let contact=document.querySelector（“#nav contact”）；
let aboutSection=document.querySelector（“#aboutSection”）；
让newsSection=document.querySelector（“#newsSection”）；
让historySection=document.querySelector（“#historySection”）；
让worldwideSection=document.querySelector（“#worldwideSection”）；
让contactSection=document.querySelector（“#contactSection”）；
让allScrollTriggers=[关于，新闻，历史，全球，联系]；
allScrollTriggers.forEach（项=>{
item.addEventListener（'click'，event=>{
日志（event.target.id）；
如果（event.target.id==“导航联系人”）{
平滑滚动（联系人部分）
}
else if（event.target.id==“导航关于”）{
平滑滚动（aboutSection）
}
})
})

然后将所有菜单项变量分配给

allScrollTriggers

数组，最后我将一个单击侦听器分配给所有使用if和if-else语句执行上述函数的菜单项

我不明白为什么这不起作用，为什么所有东西的

scrollintoview

都被读取为空

about部分的HTML如下所示

<div class="nonFixedBGSection1">
    <h2 id="contactSection">Über uns</h2>

Über uns

您的问题是您的

#aboutSection

容器的id为

#aboutSection

它应该是

aboutSection

（没有

#

）

检查模板，更改：

<h2 id="#aboutSection">Über uns</h2>

Über uns

到

Über uns

请包含一段

#aboutSection

HTML in question.HTML for#aboutSection added您提供的片段是为Contacts部分提供的，但我在您网站的源代码中发现了您的问题。很尴尬，但非常感谢。由于子菜单项是伪元素，我遇到了更多的问题，所以为了简单起见，我将其删去了

<h2 id="#aboutSection">Über uns</h2>

<h2 id="aboutSection">Über uns</h2>