Animieren Sie scrollTop, das in Firefox nicht funktioniert

Diese Funktion funktioniert gut. Es rollt den Körper zum Versatz eines gewünschten Containers

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

Aber nicht in Firefox. Warum?

-BEARBEITEN-

Um den doppelten Auslöser in der akzeptierten Antwort zu behandeln, empfehle ich, das Element vor der Animation anzuhalten:

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

Firefox platziert den Überlauf auf der htmlEbene, sofern er nicht speziell für ein anderes Verhalten ausgelegt ist.

Verwenden Sie, um es in Firefox zum Laufen zu bringen

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

Arbeitsbeispiel

Die CSS-Lösung besteht darin, die folgenden Stile festzulegen:

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

Ich würde annehmen, dass die JS-Lösung am wenigsten invasiv wäre.

Aktualisieren

Ein Großteil der folgenden Diskussion konzentriert sich auf die Tatsache, dass das Animieren scrollTopvon zwei Elementen dazu führen würde, dass der Rückruf zweimal aufgerufen wird. Browser-Erkennungsfunktionen wurden vorgeschlagen und anschließend veraltet, und einige sind wohl ziemlich weit hergeholt.

Wenn der Rückruf idempotent ist und nicht viel Rechenleistung erfordert, ist das zweimalige Auslösen möglicherweise kein Problem. Wenn mehrere Aufrufe des Rückrufs wirklich ein Problem darstellen und Sie die Funktionserkennung vermeiden möchten, ist es möglicherweise einfacher zu erzwingen, dass der Rückruf nur einmal innerhalb des Rückrufs ausgeführt wird:

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

Das Erkennen von Funktionen und das anschließende Animieren eines einzelnen unterstützten Objekts wäre nett, aber es gibt keine einzeilige Lösung. In der Zwischenzeit können Sie hier ein Versprechen verwenden, um einen einzelnen Rückruf pro Ausführung durchzuführen.

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

UPDATE: So können Sie stattdessen die Feature-Erkennung verwenden. Dieser Codeabschnitt muss vor Ihrem Animationsaufruf ausgewertet werden:

// 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();

Verwenden Sie nun die Variable, die wir gerade als Selektor für die Bildlaufanimation definiert haben, und verwenden Sie die reguläre Syntax:

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

Ich habe ewig versucht herauszufinden, warum mein Code nicht funktioniert -

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

Das Problem war in meinem CSS -

body { height: 100%};

Ich habe es autostattdessen eingestellt (und war besorgt darüber, warum es überhaupt eingestellt wurde 100%). Das hat es für mich behoben.

Vielleicht möchten Sie dem Problem mit einem Plugin ausweichen - genauer gesagt meinem Plugin :)

Im Ernst, obwohl das Grundproblem längst behoben ist (verschiedene Browser verwenden unterschiedliche Elemente für das Scrollen im Fenster), gibt es auf der ganzen Linie einige nicht triviale Probleme, die Sie stören können:

• Einfach beide animieren bodyund html hat seine Probleme ,
• Das Testen des tatsächlichen Browserverhaltens ist schwierig, um es richtig zu machen (siehe meine Kommentare zu @ Stephens Antwort ).
• Vor allem aber gibt es eine ganze Reihe von Usability-Problemen, mit denen Sie sich für eine anständige Benutzererfahrung befassen möchten.

Ich bin offensichtlich voreingenommen, aber jQuery.scrollable ist tatsächlich eine gute Wahl, um diese Probleme anzugehen. (Tatsächlich kenne ich kein anderes Plugin, das sie alle handhabt.)

Darüber hinaus können Sie die Zielposition - die Position, zu der Sie scrollen - mit der getScrollTargetPosition()Funktion in diesem Kern kugelsicher berechnen .

All das würde dich verlassen

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

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

    return false;
}

Vorsicht davor. Ich hatte das gleiche Problem, weder Firefox noch Explorer scrollen mit

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

Also habe ich verwendet, wie David sagte

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

Großartig, es hat funktioniert, aber neues Problem, da es zwei Elemente gibt, body und html, wird die Funktion zweimal ausgeführt, dh do X wird zweimal ausgeführt.

versuchte es nur mit 'html' und Firefox und Explorer funktionieren, aber jetzt unterstützt Chrome dies nicht.

Also brauchte man Body für Chrome und HTML für Firefox und Explorer. Ist es ein jQuery-Fehler? Ich weiß es nicht.

Passen Sie einfach auf Ihre Funktion auf, da sie zweimal ausgeführt wird.

Ich würde empfehlen , nicht auf Berufung bodynoch htmlals eine tragbare Lösung. Fügen Sie einfach ein Div in den Body ein, das die gescrollten Elemente enthalten soll, und gestalten Sie es so, dass das Scrollen in voller Größe ermöglicht wird:

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

(unter der Annahme , dass display:block;und top:0;left:0;sind Standardwerte , die Ihr Ziel übereinstimmt), dann verwenden Sie $('#my-scroll')für Ihre Animationen.

Das ist der wahre Deal. Es funktioniert einwandfrei auf Chrome und Firefox. Es ist sogar traurig, dass mich einige Unwissende ablehnen. Dieser Code funktioniert buchstäblich perfekt wie in allen Browsern. Sie müssen nur einen Link hinzufügen und die ID des Elements, in das Sie scrollen möchten, in die href einfügen. Dies funktioniert ohne Angabe von Angaben. Rein wiederverwendbarer und zuverlässiger Code.

$(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 [];
  }
});

Ich bin erst kürzlich auf dasselbe Problem gestoßen und habe es folgendermaßen gelöst:

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

Und youpi !!! Es funktioniert in allen Browsern.

Falls die Positionierung nicht korrekt ist, können Sie auf diese Weise einen Wert vom Offset () .top abziehen

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

Für mich war das Problem, dass Firefox automatisch mit dem Namensattribut zum Anker sprang, der dem Hash-Namen entspricht, den ich in die URL eingegeben habe. Obwohl ich .preventDefault () gesetzt habe, um das zu verhindern. Nach dem Ändern der Namensattribute sprang Firefox nicht automatisch zu den Ankern, sondern führte die Animation richtig aus.

@ Toni Sorry wenn das nicht verständlich war. Die Sache ist, dass ich die Hashes in der URL wie www.someurl.com/#hashname geändert habe. Dann hatte ich zum Beispiel einen Anker, <a name="hashname" ...></a>zu dem jQuery automatisch scrollen sollte. Dies war jedoch nicht der Fall, da in Firefox ohne Bildlaufanimation direkt zum Anker mit dem übereinstimmenden Namensattribut gesprungen wurde. Nachdem ich das Namensattribut in etwas anderes als den Hashnamen geändert hatte, z. B. in name="hashname-anchor", funktionierte das Scrollen.

Für mich wurde vermieden, die ID an der Stelle der Animation anzuhängen:

Vermeiden:

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

Bereiten Sie die ID im Voraus vor und tun Sie dies stattdessen:

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

In FF behoben. (Die CSS-Ergänzungen haben für mich keinen Unterschied gemacht)

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

Hoffe das funktioniert.