Scroll to section with a for each loop scrolls to wrong section

Question

I am working on a website, only the mobile view is somewhat complete.

I want to have the scroll to section functionality and can make it work if I assign a separate function and event listener to the individual links, but that would be repetitive.

The markup for the menu is:

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

The scrolling to the contact section works, but the one to the id="#aboutSection" element does not (it works with just CSS, but that's not scrolling smoothly). It logs the correct element, but gives me this error:

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

The JS looks like this:

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

That is the function, the intention is, it scrolls to the element passed into as argument. The function passing the argument and calling the smoothScroll function is this. First I assign the menu items to variables, then I assigned the target section elements to variables.

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

Then all the menu item variables are assigned to the allScrollTriggers array and finally I have assigned a click listener to all menu items which execute the function above with the if and if else statements.

I cannot figure out why this is not working and why scrollintoview of all things is read as null.

The HTML for the about section looks like this

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

Answer 1

Your issue is that your #aboutSection container has an id of #aboutSection it should be aboutSection (without the # ).

Check your template, change:

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

To

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