jQuery scrollTop () не работает в Safari или Chrome (Windows)

Question

У меня есть простая настройка, позволяющая загружать и прокручивать окно в стиле «справки» до определенной точки на странице. Более или менее код выглядит так:

var target = /* code */;
target.offsetParent().scrollTop(target.offset().top - fudgeValue);

Цель прокрутки и значение выдумки определяются парой подсказок, пропущенных на странице, и у меня нет проблем с этой частью этого механизма где-либо. В Firefox и IE8 приведенный выше код работает точно так, как я хочу: поле прокрутки (в данном случае тело страницы) корректно прокручивает содержимое в нужную точку окна, когда ему говорят об этом.

Однако в Chrome и Safari вызов scrollTop (), по-видимому, вообще ничего не делает. Все числа в порядке, и цель ссылается на правильную вещь (а offsetParent () действительно является элементом body), но ничего не происходит. Насколько я могу судить по поиску в интернете, это должно сработать. Что-то смешное в рендере под Safari и Chrome?

Это jQuery 1.3.2, если это имеет значение.

Тестовая страница: http://gutfullofbeer.net/scrolltop.html

Answer 1

Это сработало для меня, просто оставьте это jQuery.

$("html,body").animate({ scrollTop: 0 }, 1);

По сути, вы должны знать браузер и писать код, учитывая различия в браузере. Поскольку jQuery является кросс-браузерным, он должен обработать первый шаг. И, наконец, вы подделываете js-движок браузера, анимируя прокрутку за 1 миллисекунду.

Answer 2

как насчет

var top = $('html').scrollTop() || $('body').scrollTop();

Answer 3

Подводя итог решениям из пары вопросов / ответов:

Если вы хотите получить текущее смещение прокрутки , используйте:

$(document).scrollTop()

Для установки смещения прокрутки используйте:

$('html,body').scrollTop(x)

Для анимации прокрутки используйте , используйте:

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

Answer 4

В моем случае кнопка работала для двух из 8 ссылок. Мое решение было

$("body,html,document").animate({scrollTop:$("#myLocation").offset().top},2500);

Это также создало хороший эффект прокрутки

Answer 5

Я не уверен, что это так:

Я использовал CDN от Google для jQuery, т.е.

Положить "https:" до //ajax.google....... сработало, кажется, Safari распознал его как локальный путь (проверил - Inspect Element)

Извините, протестировано только в Safari 7.0.3: (

Answer 6

Действительно, похоже, для работы в Safari требуется анимация. Я закончил с:

if($.browser.safari) 
    bodyelem = $("body");
else 
    bodyelem = $("html,body");

bodyelem.animate({scrollTop:0},{queue:false, duration:100, easing:"linear", complete:callbackFunc});

Answer 7

Я столкнулся с этой проблемой, я создал эту ссылку внизу и реализовал код jQuery scrollTop, и он отлично работал в Firefox, IE, Opera, но не работал в Chrome и Safari. Я изучаю jQuery, поэтому я не знаю, является ли это решение технически совершенным, но это сработало для меня. Я только что реализовал 2 кода ScrollTop, первый использует $ ('html'), который работает для Firefox и т. Д. Второй использует $ ('html body'), это работает для Chrome и Safari.

$('a#top').click(function() {

    $('html').animate({scrollTop: 0}, 'slow');
    return false;

    $('html body').animate({scrollTop: 0}, 'slow');
    return false;
});

Answer 8

Не существует большого выбора элементов, которые могут автоматически назначаться со значением scrollTop при прокрутке веб-страницы.

Итак, я написал эту маленькую функцию, чтобы перебрать возможные элементы и вернуть тот, который мы ищем.

var grab=function (){
    var el=$();
        $('body#my_body, html, document').each(function(){
            if ($(this).scrollTop()>0) {
                el= ($(this));
                return false;
            }
        })
    return el;
}
//alert(grab().scrollTop());

В Google Chrome нам достанется тело, в IE - HTML.

(Обратите внимание, нам не нужно явно указывать overflow:auto в нашем html или теле).

Answer 9

Это не совсем ошибка, просто разница в имплантации от поставщиков браузеров.

Как правило, избегайте прослушивания браузера. Есть изящное исправление jQuery, на которое намекают в ответах.

Вот что у меня работает: $('html:not(:animated),body:not(:animated)').scrollTop()