problem z metodą scrollTo po kliknięciu

0

Witam.
Chcę ustawić scrollowanie strony po kliknięciu w jeden ze znaczników w menu.
Po pierwszym kliknięciu scrollowanie działa ale klikając w ten sam znacznik za drugim razem odsyła mnie do pozycji top: 0;
Proszę o wyjaśnienie dlaczego się tak dzieje.

referrerpolicy="no-referrer" />

 <style>

    body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        color: white;
        height: 500vh;
    }

    nav {
        background-color: rgba(32, 32, 32, 0.623);
       padding: 5px 5px;
       position: fixed;
       width: 100%;
    }

    ul {
        text-decoration: none;
        display: flex;
        justify-content: space-around;
    }

    li {
       list-style-type: none;

    }

    a {
       color: white;
       text-decoration: none;
    }

#start{
    background-color: blue;
    height: 70vh;
}

#me {
    background-color: blueviolet;
    height: 100vh;
}

#contact {
    background-color: bisque;
    height: 55vh;
}


 </style>

</head>

<body>
<nav>
    <ul>
        <li><a href="#" data-id="start">Start</a></li>
        <li><a href="#" data-id="me">Me</a></li>
        <li><a href="#" data-id="contact">Contact</a></li>
    </ul>
</nav>
<main>
    <section id="start">START</section>
    <section id="me">ME</section>
    <section id="contact">CONTACT</section>
</main>
 <script src="script.js"></script>
</body>

const list = document.querySelectorAll('a');
const allSection = document.querySelectorAll('section');
list.forEach(element => {
    element.addEventListener('click', function () {
        const elementID = element.dataset.id;
        const offsetElement = document.querySelector(`#${elementID}`).offsetTop;
        console.log(offsetElement);

        window.scrollTo({
            top: offsetElement,
            left: 0,
            behavior: 'smooth'
        });
    })
})
2

Użyj scrollIntoView i będzie działało.

const list = document.querySelectorAll('a');
const allSection = document.querySelectorAll('section');
list.forEach(element => {
  element.addEventListener('click', function (e){
    e.preventDefault();
    const elementID = element.dataset.id;
    const targetElement  = document.querySelector(`#${elementID}`);
    
    targetElement.scrollIntoView({behavior: 'smooth'});
  })
})

Przykład na żywo:
https://codepen.io/zerakot/pen/qBoRKEj

Jednakże nie potrzebujesz to tego w ogóle JS'a. Możesz użyć tylko HTML i CSS.

<nav>
    <ul>
        <li>
            <a href="#start" data-id="start">Start</a>
        </li>
        <li>
            <a href="#me" data-id="me">Me</a>
        </li>
        <li>
            <a href="#contact" data-id="contact">Contact</a>
        </li>
    </ul>
</nav>
<main>
    <section id="start">START</section>
    <section id="me">ME</section>
    <section id="contact">CONTACT</section>
</main>

oraz

html {
  scroll-behavior: smooth;
}

Przykład na żywo:
https://codepen.io/zerakot/pen/jOzyKOj

1 użytkowników online, w tym zalogowanych: 0, gości: 1