Porque meu <li> necessita de dois clicks para descer a tela?

Front-end
, ,
#1

Olha eu tenho esse recurso daqui pra quando eu clicar em li é para ele descer de forma “suave” até um certo local da pagina, mas tem algum bug que obriga a pessoa clicar 2 vezes nesse botão e deixa meio desagradavel o movimento do 1 click.
.
html

<div class="container">
        <div class="navbar">
            <nav>
                <ul id="menu">
                    <li id="Buton"><a href="#Buton" onclick="ButaoDeRedic()">butão</a></li>
                </ul>
            </nav
        </div>

    </div>

    <script src="lista.js"></script>
</body>

<div class="espace">
    a
</div>

javascript

function ButaoDeRedic() {


    var lis = document.getElementById("Buton");

    lis.addEventListener('click', () => window.scrollTo({
        top: 8000,
        behavior: 'smooth',
    }))



}

acho que não precisa do css então quem puder me ajudar agradeço ; )
alguem consegue fazer esse li ser clicado 1 unica vez?

notas que observei:

  • é preciso da tag href
  • 1* click bugado, 2* normal