javascript - 非常奇怪的 Firefox 行为 : onclick + scrollBy work randomly

Question

很抱歉，如果我遗漏了一些非常基本的东西，我只是从 JS 开始。

我有一个函数可以在用户单击链接时使浏览器滚动到某个部分:

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

};

然后，我有事件监听器将函数关联到链接。

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

这在 Chrome 上完美运行，但在 FireFox(假设是 Safari)上，行为很奇怪。当您单击该链接时，它会通过该函数，因为它会执行“console.log”行。尽管它不滚动。

如果我在控制台上输入函数名称，它会滚动。

如果我发疯并开始点击链接，最终它会向下滚动。

提前致谢!

您可以在 http://marccamprecios.com/kojima/kodata.html# 中找到它

Answer 1

问题是您有 href="#" 将您带到页面顶部，这会干扰您的功能。

相反，您可以使用:

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