jQuery scrollTop несовместим во всех браузерах

Question

В Chrome и Safari $("body").scrollTop(1000) идет туда, где и ожидалось.

В IE и FF ничего не происходит.

В IE и FF $(window).scrollTop(1000) работает, но они идут по-разномумест.Это также работает в Chrome и Safari, но они оба отправляются в другое место.Похоже, что они отключены на 300-500 пикселей.

Есть ли какой-либо последовательный способ установить свойство scrollTop, которое работает в разных браузерах, и если нет, почему jQuery не абстрагирует это?

Я также хотел бы анимировать его, что прекрасно работает в Chrome и Safari, но не в других браузерах.

Является ли мой единственный вариант обнаружения браузера?(плохая практика) Или есть какой-то лучший способ?

Answer 1

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: myTop }, myDur);

Браузеры Webkit (Chrome / Safari, Mac и Win) используют "body", другие (FF / Opera / IE 7-9) используют "html"

Должен любить обнаружение браузера.

Answer 2

Попробуйте

$(document).scrollTop("...");

Answer 3

Вам необходимо применить scrollTop либо к body, либо к html в зависимости от браузера, но не вредно применять его к обоим. Поскольку .scrollTop() применяется к первому элементу в наборе, а .animate() применяется ко всем элементам, вы можете сделать это:

$('body, html').animate({
  scrollTop: 1000
}, 'fast');

Если вы хотите, чтобы изменение вступило в силу немедленно, измените скорость ('fast') на 0. В качестве альтернативы вы можете использовать следующее, но мне больше нравится приведенный выше синтаксис:

$('body, html').each(function() { $(this).scrollTop(1000); });