Animate scrollTop не работает в firefox

обнаружение функций, а затем анимация на одном поддерживаемом объекте было бы неплохо, но нет решения одной строки. Тем временем, вот способ использовать обещание сделать один обратный вызов за выполнение.

$('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 есть свои проблемы,
• feature-тестирование фактического поведение браузера сложно получить право (см. мои комментарии к ответу @ Stephen's),
• но самое главное, что есть целая куча проблем юзабилити что вы хотите заниматься на приличный опыт пользователей.

Я, очевидно, предвзят, но С помощью jQuery.прокручиваемый на самом деле хороший выбор для решения этих вопросов. (На самом деле, я не знаю никакого другого плагина, который обрабатывает их все.)

В дополнение, вы можете вычислить целевую позицию – ту, на которую вы прокручиваете-пуленепробиваемым способом с помощью the getScrollTargetPosition() функция в этом gist.

все это оставит вас с

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, функция выполняется дважды, то есть do X запускается два раза.

пробовал только с "html", а Firefox и Explorer работают, но теперь Chrome не поддерживает это.

поэтому необходим корпус для Chrome и html для Firefox и Explorer. Это ошибка jQuery? не знаю.

просто остерегайтесь своей функции, так как она будет работать дважды.

Я бы порекомендовал не опираясь на body, ни html как более портативное решение. Просто добавьте div в тело, которое стремится содержать прокручиваемые элементы и стиль, чтобы включить полноразмерную прокрутку:

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

(предполагая, что display:block; и top:0;left:0; являются значениями по умолчанию, которые соответствуют вашей цели), затем используйте $('#my-scroll') для анимации.

Это реальная сделка. Он работает на Chrome и Firefox безупречно. Даже печально, что некоторые невежды голосуют против меня. Этот код буквально работает отлично, как и во всех браузерах. Вам нужно только добавить ссылку и поместить идентификатор элемента, который вы хотите прокрутить в 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 [];
  }
});

для меня проблема заключалась в том, что firefox автоматически перескочил на якорь с атрибутом name-таким же, как имя хэша, которое я поместил в URL. Хоть я и поставил .метод preventDefault (), чтобы предотвратить это. Таким образом, после изменения атрибутов имени firefox не автоматически переходил к якорям, а выполнял анимацию правильно.

@Toni Извините, если это было непонятно. Дело в том, что я изменил хэши в URL-адресе, как www.someurl.com/#hashname - ... Тогда у меня был, например, якорь как <a name="hashname" ...></a> к которому jQuery должен прокручиваться автоматически. Но это не так, потому что он прыгнул прямо на якорь с атрибутом соответствующего имени в Firefox без анимации прокрутки. Как только я изменил атрибут name на что-то отличное от имени хэша, например на name="hashname-anchor" прокрутка работала.

для меня это избегало добавления идентификатора в точке анимации:

избежать:

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

подготовка id заранее и делать это вместо этого:

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

исправлено в FF. (Дополнения css не имеют значения для меня)

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

надеюсь, что это работает.