我在Firefox 75中遇到了一个奇怪的行为，代码如下：
HTML:
<html>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipiscing elit sociis vivamus euismod, netus arcu pulvinar egestas cras commodo fames dui nostra tortor quam, class duis sagittis fusce pellentesque conubia ornare venenatis hac. Quis pretium nulla ad nisi aliquam euismod nunc, consequat fermentum sociis eros felis tempus, tortor a risus dignissim fusce facilisis. Fermentum erat eget libero tellus semper gravida enim rhoncus, placerat natoque mauris sollicitudin class eros tincidunt augue volutpat, penatibus vel interdum nunc cubilia taciti dictumst.
...
(the rest is omitted for brevity)
</div>
<a rel="nofollow" href="#" class="scroll-to-top-link">
Go to top link
</a>
<button class="scroll-to-top-button">
Go to top button
</button>
</body>
</html>
JS:
( function() {
'use strict';
// Feature Test
if ( 'querySelector' in document && 'addEventListener' in window ) {
var goTopBtnLink = document.querySelector( '.scroll-to-top-link' );
var goTopBtnButton = document.querySelector( '.scroll-to-top-button' );
var nativeSmoothScroll = function () {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
};
goTopBtnLink.addEventListener( 'click', function( e ) {
e.preventDefault();
nativeSmoothScroll();
});
goTopBtnButton.addEventListener( 'click', function( e ) {
nativeSmoothScroll();
});
}
} )();
页面底部有一个滚动到顶链接和一个滚动到顶按钮。如果我点击链接，页面会平滑地滚动到顶部。当我也点击按钮时，但只是第一次。在随后的时间里，页面滚动过快，忽略behavior: 'smooth'选项。
我把整个代码放在小提琴上：
https://jsfiddle.net/mf4rz8hj/9/
Chrome没有显示这种行为。有什么想法吗？
为什么不使用CSS呢？
html {
scroll-behavior: smooth;
}
这在IE和Safari上不起作用。
如果我删除button元素的一些样式，问题就会消失。
button {
-webkit-appearance: button;
background-color: transparent;
border-style: solid; /* remove this */
border-width: 1px;
border-radius: 2px;
color: inherit;
cursor: pointer;
padding: 0.4278em 1.25em; /* or remove this */
-webkit-transition: color 0.25s ease, background-color 0.25s ease;
transition: color 0.25s ease, background-color 0.25s ease;
}
这可能是一个错误，因为一些不相关的CSS属性的存在可能会以这种方式影响JS代码，这是毫无意义的。