$('html body').animate({ scrollTop: 在 Firefox 中不起作用答案

【问题标题】：$('html body').animate({ scrollTop: not working in Firefox$('html body').animate({ scrollTop: 在 Firefox 中不起作用
【发布时间】：2017-01-29 21:50:41
【问题描述】：

使用 jQuery 滚动页面在 Firefox 中不起作用（在 Chrome 中可以正常工作）当我单击菜单项时，页面应滚动到菜单的给定部分，并且仅在 Chrome 中有效。

我想知道我的代码有什么问题https://jsfiddle.net/4yrorr9k/

function setBindings() {
    $('nav a, #slidebox a').click(function(e){
    event.preventDefault();

    var sectionID = e.currentTarget.id + 'Section';

    $('html body').animate({
    scrollTop: $('#' + sectionID).offset().top}, 500)
  });
}

我认为它与 ScrollTop 有关，因此是我问题的标题。

【问题讨论】：

标签： javascript jquery html css firefox

【解决方案1】：

虽然存在问题，但未声明事件（在 firefox 中事件不是全局的），这可以在开发者控制台中看到。导致滚动顶部无法在 Firefox 中工作的问题是您设置的 setBindings 函数中的动画选择器。

$('html body').animate({
        scrollTop: $('#' + sectionID).offset().top}, 500)
});

改成

$('html, body').animate({
        scrollTop: $('#' + sectionID).offset().top}, 500)
});

小提琴：https://jsfiddle.net/2ynbto8x/

【讨论】：

所以而不是 event.preventDefault();应该有 e.preventDefault();
@AKAI 是的，你是对的，但这完全取决于你在 function(variable) 中传递的变量名。它变量是事件然后是 event.preventDefault() 如果它是 e 然后是 e.preventDefault()
啊啊，好的，现在我明白了

【解决方案2】：

这里有很多小东西，主要的是你的 ('html body') 的 jQuery 选择器（即 html 中的一个主体） - 你需要它是/或在两者之间放置一个逗号。

这是因为 Chrome 滚动 body 元素，Firefox 滚动 HTML 元素。

此外，当您尝试使用未声明的“事件”变量时，Firefox 会引发错误，因此您需要将其替换为“e”。

此外，由于您的“顶部”结果可能是小数，我会将其解析为 int，然后指定这是一个像素位置，因此：

$('html, body').animate({
    scrollTop: parseInt($('#' + sectionID).offset().top) + 'px'}, 500)
});

在这里修改了 jsFiddle：https://jsfiddle.net/kitkit/jftfdq70/2/

【讨论】：