非常奇怪的 Firefox 行为：onclick + scrollBy 随机工作

Question

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

我有一个功能可以让浏览器在用户单击 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'
});

};

然后，我有事件侦听器将函数关联到 link。

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

这在 Chrome 上完美运行，但在 FireFox（假设是 Safari）上，行为很奇怪。当您单击 link 时，它会执行该函数，因为它会执行 "console.log" 行。尽管它不滚动。

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

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

非常感谢！

您可以在 http://marccamprecios.com/kojima/kodata.html#

中找到它

Answer 1

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

相反，您可以使用：

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

Answer 2

根据我的评论，我无法在 jsfiddle 中的 FF 中重现该问题。

作为初始故障排除，确保在 HTML 文档的末尾包含此 JS。

否则，你可以试试：

添加preventDefault();
将 scrollBy 更改为 scrollTo
去掉左边的属性

function scrollToRegisterForm(event) {

event.preventDefault();

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

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

window.scrollTo({
  top: registerIntroTop,
  behavior:'smooth'
});

};

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

<a href="#" class="login-or-register__register">Register</a>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<h2 class="register-intro">REGISTER HEADER</h2>

非常奇怪的 Firefox 行为：onclick + scrollBy 随机工作

Very weird Firefox behavior: onclick + scrollBy work randomly

javascript

firefox

scroll

mozilla

onclick