Question

使用jQuery滚动页面在Firefox中不起作用（在Chrome中运行正常）当我点击菜单项时，页面应滚动到菜单的给定部分，它仅适用于Chrome。

有什么问题

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有关，因此是我问题的标题。

Answer 1

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

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

将此更改为

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

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

Answer 2

这里有很多小东西，主要的是你的jQuery选择器（＆＃39; html body＆＃39;）（即html中的一个主体） - 你需要把它放在一个/左右介于两者之间的逗号。

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

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

此外，作为您的顶级＆＃39;结果可以是小数，我将其解析为int，然后指定这是一个像素位置，所以：

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

此处修改了jsFiddle：https://jsfiddle.net/kitkit/jftfdq70/2/

$（'html body'）。animate（{scrollTop：在Firefox中不起作用

2 个答案: