Animate scrollTop在Firefox中不起作用

此功能工作正常。它将主体滚动到所需容器的偏移量

function scrolear(destino){
    var stop = $(destino).offset().top;
    var delay = 1000;
    $('body').animate({scrollTop: stop}, delay);
    return false;
}

但不是在Firefox中。为什么？

-编辑-

为了处理接受的答案中的双重触发，我建议在动画之前停止元素：

$('body,html').stop(true,true).animate({scrollTop: stop}, delay);

Firefox会将溢出置于html级别上，除非专门设置其行为方式有所不同。

要使其在Firefox中运行，请使用

$('body,html').animate( ... );

工作实例

CSS解决方案是设置以下样式：

html { overflow: hidden; height: 100%; }
body { overflow: auto; height: 100%; }

我认为JS解决方案的侵入性最低。

更新资料

下面的许多讨论都集中在以下事实上：scrollTop对两个元素进行动画处理会导致回调被调用两次。已经提出了浏览器检测功能，但随后不推荐使用这些功能，其中一些功能可以说是牵强的。

如果回调是幂等的并且不需要很多计算能力，则将其触发两次可能是完全不可行的。如果确实多次调用回调，并且想要避免功能检测，则强制将回调仅在回调内运行一次可能会更直接：

function runOnce(fn) { 
    var count = 0; 
    return function() { 
        if(++count == 1)
            fn.apply(this, arguments);
    };
};

$('body, html').animate({ scrollTop: stop }, delay, runOnce(function() {
   console.log('scroll complete');
}));

特征检测然后在单个受支持对象上设置动画效果会很好，但是还没有一种解决方案。同时，这是一种使用promise每次执行一次回调的方法。

$('html, body')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});

更新：这是您可以使用特征检测的方法。在调用动画之前，需要对以下代码进行评估：

// Note that the DOM needs to be loaded first, 
// or else document.body will be undefined
function getScrollTopElement() {

    // if missing doctype (quirks mode) then will always use 'body'
    if ( document.compatMode !== 'CSS1Compat' ) return 'body';

    // if there's a doctype (and your page should)
    // most browsers will support the scrollTop property on EITHER html OR body
    // we'll have to do a quick test to detect which one...

    var html = document.documentElement;
    var body = document.body;

    // get our starting position. 
    // pageYOffset works for all browsers except IE8 and below
    var startingY = window.pageYOffset || body.scrollTop || html.scrollTop;

    // scroll the window down by 1px (scrollTo works in all browsers)
    var newY = startingY + 1;
    window.scrollTo(0, newY);

    // And check which property changed
    // FF and IE use only html. Safari uses only body.
    // Chrome has values for both, but says 
    // body.scrollTop is deprecated when in Strict mode.,
    // so let's check for html first.
    var element = ( html.scrollTop === newY ) ? 'html' : 'body';

    // now reset back to the starting position
    window.scrollTo(0, startingY);

    return element;
}

// store the element selector name in a global var -
// we'll use this as the selector for our page scrolling animation.
scrollTopElement = getScrollTopElement();

现在，使用我们刚刚定义为页面滚动动画选择器的var，并使用常规语法：

$(scrollTopElement).animate({ scrollTop: 100 }, 500, function() {
    // normal callback
});

我花了很长时间试图弄清楚为什么我的代码不起作用-

$('body,html').animate({scrollTop: 50}, 500);

问题出在我的CSS中-

body { height: 100%};

我将其设置为auto（并且一直担心为什么将其设置为100%第一位）。这为我解决了。

您可能想通过使用插件来躲避问题-更具体地说，我的插件 :)

认真地讲，即使基本问题早已得到解决（不同的浏览器使用不同的元素进行窗口滚动），但仍有很多非平凡的问题可能会使您绊倒：

• 简单地将两者动画化body并html 有问题，
• 功能测试实际的浏览器行为很难正确（请参阅我对@Stephen的回答的评论），
• 但最重要的是，您要解决很多可用性问题，以获得良好的用户体验。

我显然有偏见，但是jQuery.scrollable实际上是解决这些问题的一个不错的选择。（实际上，我不知道有其他插件可以处理所有问题。）

此外，您还可以使用此要点中的getScrollTargetPosition()功能以防弹方式计算目标位置（滚动至目标位置）。

所有这些都会让你

function scrolear ( destino ) {
    var $window = $( window ),
        targetPosition = getScrollTargetPosition ( $( destino ), $window );

    $window.scrollTo( targetPosition, { duration: 1000 } );

    return false;
}

当心这一点。我遇到了同样的问题，Firefox或Explorer都无法滚动

$('body').animate({scrollTop:pos_},1500,function(){do X});

所以我曾经像大卫所说

$('body, html').animate({scrollTop:pos_},1500,function(){do X});

很好用，但是出现了新问题，因为有两个元素，body和html，函数执行两次，也就是说，X执行两次。

仅使用'html'尝试过，并且Firefox和Explorer可以工作，但现在Chrome不支持此功能。

因此，Chrome需要使用正文，而Firefox和Explorer需要使用html。它是jQuery的错误吗？不知道

请注意您的功能，因为它将运行两次。

我建议不要依赖body也不html是更可移植的解决方案。只需在主体中添加一个div即可包含滚动元素并对其样式进行设置即可启用全尺寸滚动：

#my-scroll {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}

（假设display:block;且top:0;left:0;是与您的目标匹配的默认值），然后将其$('#my-scroll')用于动画。

这是实打实的。它可以完美地在Chrome和Firefox上运行。一些无知的人将我投下反对票，这真是令人遗憾。该代码从字面上看可以像在所有浏览器上一样完美运行。您只需要添加一个链接，然后将要滚动的元素的id放入href中即可使用，而无需指定任何内容。纯可重用且可靠的代码。

$(document).ready(function() {
  function filterPath(string) {
    return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }
});

我最近遇到了同样的问题，并通过执行以下操作解决了该问题：

$ ('html, body'). animate ({scrollTop: $ ('. class_of_div'). offset () .top}, 'fast'});

和你！它适用于所有浏览器。

如果定位不正确，您可以通过执行以下操作从offset（）.top中减去一个值

$ ('html, body'). animate ({scrollTop: $ ('. class_of_div'). offset () .top-desired_value}, 'fast'});

对我来说，问题是firefox会自动跳到锚点，其名称属性与我放入URL中的哈希名称相同。即使我放了.preventDefault（）来防止这种情况。因此，更改名称属性后，firefox不会自动跳转到锚点，而是正确执行动画。

@Toni对不起，如果这无法理解。关键是我更改了www.someurl.com/#hashname之类的URL中的哈希。然后我有一个锚，例如<a name="hashname" ...></a>jQuery应该自动滚动到的锚。但这不是因为它在没有任何滚动动画的情况下直接跳到Firefox中具有匹配名称属性的锚点。一旦我将name属性更改为与哈希名称不同的名称（例如，更改为）name="hashname-anchor"，滚动就会起作用。

对我来说，避免在动画时附加ID：

避免：

 scrollTop: $('#' + id).offset().top

事先准备id并执行以下操作：

 scrollTop: $(id).offset().top

在FF中固定。（css的添加对我没有影响）

setTimeout(function(){                               
                   $('html,body').animate({ scrollTop: top }, 400);
                 },0);

希望这行得通。