Тот же старый выпуск, .scrollTop (0), не работающий в Chrome & Safari

Question

Прежде всего, позвольте мне указать, что я искал в googled и даже смотрел ответы здесь, например this и this, однако я еще не добрался до найти рабочее решение для моего дела.

Я разработал страницу с несколькими фиксированными элементами, охватывающими страницу, и создал html5/css3, чтобы создать чистую «маску» над основным документом, тем самым позволяя прокручиванию тела прокручивать основное содержимое.

В firefox и ie (bleh) scrollTop (0) работает идеально. Однако, как заявил вопрос, не так много в моих fav браузерах.

Что-то я сделал примечание, чтобы вызвать следующие как до события scrollTo и после

$("body,html,document").each(function(){ console.log($(this).scrollTop()); }); 

Результаты не были приятны, он говорит мне, что scrolltop уже 0 и, следовательно, не является даже попытка scrollTop, или, по крайней мере, это то, что я «думаю» до сих пор.

И прежде чем вы спросите, я сделал этот консольный вызов для каждого из этих трех элементов, поскольку документ scrolltop должен быть закрыт в одном из этих элементов (я бы подумал о теле, но, как и в случае необходимости, вы должны называть html тоже)

Любые покупатели идей?

FYI, это может быть CSS странностью (Тхо, как это работает в IE, а не хромо я действительно не могу понять), но я уже пробовал следующее с отрицательных результатов:

$(window).scrollTop(0); 
$(document).scrollTop(0); 
$("html").scrollTop(0); 
$("body").scrollTop(0); 
window.scroll(0,0); 
$("body,html,document").scrollTop(0); 
$("body,html").scrollTop(0); 

Что я полагаю, продлевает мой вопрос, является ли это проблемой css? я не имею вне связи и код слишком длинный (сделанный с видом CI частичными) размещать все это, но выяснить, что я сделал:

• Фиксированный заголовок, колонтитул и боковой панели, оставляя содержимое прокручивать с documet скроллингом
• очень мало Javascript или JQuery реализована до сих пор, почти 0 пользовательских CSS вне фиксации положения presaid элементов
• «содержание» является ajax'd при помощи функции .load JQuery, основанные на элементах списка перешедших in sidebar navigator

температура Fiddle уже не до

Answer 1

Проблема с CSS. В частности, правила, которые я включил ниже.

html, body { 
    overflow-x: hidden; 
    overflow-y: auto; 
} 

Хотя эти правила, очевидно, связано с скроллинга, я не знаю, почему они вызывают поведение, которое вы наблюдаете. Но если вы их удалите, он должен решить вашу проблему.

См.: http://jsfiddle.net/jNWUm/23/.

Answer 2

Я просто не протестированы следующие в IE8 и Chrome, и обе работы:

$(window).scrollTop(0) 

Answer 3

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

$('#element_id').stop().animate({ scrollTop: 0 }, 500); 

Это, по-видимому, ведет себя лучше, чем .scrollTop(0).

Answer 4

Также проверьте этот ответ: scrolltop broken on android - он работает лучше всего, когда переполнение установлено на видимое и положение относительно относительного - но ymmv. Вы можете найти эти полезные ...

function repeatMeOnMouseDown() // for smooth scrolling 
{ 
    var $newTop = $('#element_id').position().top + ($goingUp ? -20 : 20); 
    $('#element_id').animate({top: $newTop}, 20, repeatMeOnMouseDown); 
} 

// these should work 
$('#element_id').animate({top: -200}, 200); // scroll down 
$('#element_id').animate({top: 0}, 200); // scroll back up 

// DON'T DO THIS - Offsets don't work with top like they do with scrollTop 
$('#element_id').animate({top: ("-= " + 200)}, 200); 

// and when you get tired of fighting to do smooth animation 
// on different browsers (some buggy!), just use css and move on 
function singleClick($goingUp) 
{ 
    var $newTop = $('#element_id').position().top + ($goingUp ? -200 : 200); 
    $('#element_id').css({top: $newTop}, 20); 
} 

Answer 5

У меня была такая же проблема. Если я положил

$(window).scrollTop(0); 

в документе готовый обработчик, он не работал; но если я тестирую его на панели консоли javascript инструментария разработчика Chrome, это сработало! Единственное различие заключалось в времени выполнения скрипта. Поэтому я пробовал

window.setTimeout(function() { 
    $(window).scrollTop(0); 
}, 0); 

И он работал. Установка задержки больше 0 не требуется, хотя это также сработало. Это не ошибка JQuery, потому что это то же самое с

window.scrollTo(0, 0); window.scroll(0, 0); 

Так что причина может быть браузер заполнит свойство window.pageYOffset после отображает страницу и выполняет JS.

Answer 6

Этот код был протестирован на хром. http://jsfiddle.net/wmo3o5m8/1/

(function() { 
    var down = false, downX, downY; 
    document.onmousedown = function (e) { 
     downX = e.pageX; 
     downY = e.pageY; 
     down = true; 
    }; 
    document.onmouseup = function() { down = false; }; 
    document.onmousemove = function (e) { 
     if (down) { 
      window.scrollTo(
       window.scrollX + downX - e.pageX, 
       window.scrollY + downY - e.pageY 
      ); 
     } 
    }; 
})(); 

Answer 7

Это нормальное поведение, когда в вашем CSS вы объявляете overflow: hidden для html или body элементы DOM, как вы можете прочитать в jQuery API docs: Вертикальное положение

прокрутки так же, как количество пикселей, которые скрыты от просмотра над прокручиваемой областью. Если полоса прокрутки на самом верху, или если элемент не прокручивать, это число будет равно 0.

С overflow: hidden полоса прокрутки не виден поэтому элемент не прокручиваются, поэтому число будет 0 в каждом (мне интересно) браузере, который вы будете использовать.

Answer 8

FYI, если не в верхнем теле, то есть в iframe, просто попробуйте window.top.scrollTo (0,0);

Answer 9

У меня была такая же проблема с прокруткой в ​​chrome. Причина была height:100% стиль в body и html. See this answer

Answer 10

$('#element-id').prop('scrollTop', 0); также должен сделать трюк.