请教动画滚动顶部无法在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%首先)。帮我修好了。