动画滚动顶部无法在Firefox中工作

Question

动画滚动顶部无法在Firefox中工作

这个函数工作得很好。它将身体滚动到所需容器的偏移量。

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

但在Firefox中并非如此。为什么？

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

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

Answer 1

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');}));

Answer 2

特征检测，然后在一个受支持的对象上动画将是很好的，但没有一个一行的解决方案。同时，这里有一种方法可以使用承诺，在每次执行中执行一次回调。$('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 undefinedfunction 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});

Answer 3

我花了很长时间想弄明白为什么我的代码不能工作-$('body,html').animate({scrollTop: 50}, 500);问题就在我的CSS里-body { height: 100%};我把它设置为auto相反(而让人担心的是，为什么它会被设置为100%首先)。帮我修好了。