Very weird Firefox behavior: onclick + scrollBy work randomly

Question

and sorry if I'm missing something very basic, I'm just begining with JS.

I've a function to make the browser scroll to a certain section when the user clicks a link:

function scrollToRegisterForm(event) {

const registerIntro = document.getElementsByClassName("register-intro")[0];
const registerIntroTop = registerIntro.offsetTop - 20;

console.log(registerIntro);
console.log(registerIntroTop);

window.scrollBy({
  top: registerIntroTop,
  left: 0,
  behavior:'smooth'
});

};

And then, I have the event listener to associate the the function to the link.

document.addEventListener("DOMContentLoaded", function() {
  var linkToRegister = document.getElementsByClassName("login-or-register__register")[0];
  linkToRegister.onclick = scrollToRegisterForm;
});

This works perfectly on Chrome, but on FireFox (and assuming Safari), the behaviour is weird. When you click the link, it goes through the function because executes the "console.log" lines. Altough it doesn't scroll.

If I type in the function name on the console, it does scroll.

If I get crazy and start clicking the link, eventually it will scroll down.

Thanks a lot in advance!

You can find it in http://marccamprecios.com/kojima/kodata.html#

Answer 1

The issue is that you have href="#" which takes you to the top of the page, and that interferes with your function.

Instead, you can use:

<a href="javascript:void(0)">link</a>