时间戳

首页 > 解决方案 > 滚动到每个循环滚动到错误部分的部分

javascript - 滚动到每个循环滚动到错误部分的部分

问题描述

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

我想要滚动到部分功能，如果我为各个链接分配一个单独的函数和事件侦听器，它就可以工作，但这将是重复的。

菜单的标记是：

<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>

滚动到联系人部分有效，但滚动到id="#aboutSection"元素部分无效（它仅适用于 CSS，但滚动不顺畅）。它记录了正确的元素，但给了我这个错误：

(index):794 Uncaught TypeError: Cannot read property 'scrollIntoView' of null
    at smoothScroll ((index):794)
    at HTMLAnchorElement.<anonymous> ((index):788)

JS 看起来像这样：

function smoothScroll (targetElement) {
    targetElement.scrollIntoView({
        behavior: 'smooth'
    });
}

那就是函数，目的是，它滚动到作为参数传入的元素。传递参数并调用函数的smoothScroll函数就是this。首先，我将菜单项分配给变量，然后将目标部分元素分配给变量。

let about = document.querySelector('#nav-about');
let news = document.querySelector('#nav-news');
let history = document.querySelector('#nav-history');
let worldwide = document.querySelector('#nav-worldwide');
let contact = document.querySelector('#nav-contact');

let aboutSection = document.querySelector('#aboutSection');
let newsSection = document.querySelector('#newsSection');
let historySection = document.querySelector('#historySection');
let worldwideSection = document.querySelector('#worldwideSection');
let contactSection = document.querySelector('#contactSection');

let allScrollTriggers = [about,news,history, worldwide,contact];

allScrollTriggers.forEach(item => {
    item.addEventListener('click', event => {
        console.log(event.target.id);

        if (event.target.id == "nav-contact") {
            smoothScroll(contactSection)
        }
        else if (event.target.id == "nav-about") {
            smoothScroll(aboutSection)
        }
    })
})

然后将所有菜单项变量分配给allScrollTriggers数组，最后我为所有使用 if 和 if else 语句执行上述函数的菜单项分配了一个点击侦听器。

我无法弄清楚为什么这不起作用以及为什么scrollintoview所有事情都被读为空。

about 部分的 HTML 如下所示

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

标签： javascripthtmlcss

解决方案

您的问题是您的#aboutSection容器的 id#aboutSection应该是aboutSection（没有#）。

检查您的模板，更改：

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

到

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

推荐阅读