Выделите раздел с помощью a для каждого l oop прокрутки в неправильный раздел

Question

Я работаю над веб-сайтом, только мобильное представление несколько завершено.

Я хочу иметь функцию прокрутки до раздела и могу заставить ее работать, если я назначу отдельную функцию и прослушиватель событий для отдельного человека. ссылки, но это будет повторяться.

Разметка для меню:

<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, такова. Сначала я назначаю элементы меню переменным, затем я назначаю элементы целевой секции переменным.

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 всех вещей читается как ноль.

1031 * для раздела about выглядит следующим образом

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

Answer 1

Ваша проблема в том, что ваш контейнер #aboutSection имеет идентификатор #aboutSection, он должен быть aboutSection (без #).

Проверьте шаблон, измените:

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

К

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