Та же старая проблема, .scrollTop(0) не работает в Chrome и Safari
Во-первых, позвольте мне указать, я гуглил и даже смотрел на ответы здесь вот так, и это, однако, я все еще должен найти рабочее решение для моего случая.
Я разработал страницу, которая имеет несколько фиксированных элементов, покрывающих страницу, и использует html5/css3, чтобы создать чистую "маску" для основного документа, позволяя тем самым полосе прокрутки тела по-прежнему прокручивать основное содержимое.
В Firefox и ie (bleh) scrollTop(0) работает идеально. Впрочем, как гласит вопрос, не так уж и много в моих любимых браузерах.
Что-то, на что я обратил внимание, это вызов следующего как до события scrollTo, так и после
$("body,html,document").each(function(){ console.log($(this).scrollTop()); });
Результаты не были приятными, это говорит мне, что scrolltop уже равен 0 и, таким образом, даже не пытается scrollTop, или, по крайней мере, это то, что я "думаю" до сих пор.
И прежде чем вы спросите, я сделал этот консольный вызов для каждого из этих 3 элементов, так как скролттоп документа должен быть покрыт одним из этих элементов (я бы подумал, что тело, но, как в, то есть вы должны также вызвать html)
Есть любители идей?
К вашему сведению, это может быть странностью CSS (хотя, как это работает в IE, а не в Chrome, я действительно не могу понять), но я уже пробовал следующее с отрицательными результатами:
$(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 view Partials), чтобы публиковать все это, но чтобы уточнить, что я сделал:
- Исправлены верхний и нижний колонтитулы и боковая панель, позволяющая прокручивать содержимое с помощью полосы прокрутки документа
- к настоящему моменту реализовано очень мало javascript или jquery, почти 0 пользовательских css вне фиксированной позиции предопределенных элементов
- "content" используется в ajax с использованием функции.QQQuery, основанной на элементах списка, которые нажимаются в навигаторе боковой панели.
временная скрипка больше не поднимается
13 ответов
Проблема с CSS. В частности, правила, которые я включил ниже.
html, body {
overflow-x: hidden;
overflow-y: auto;
}
Хотя эти правила, очевидно, связаны с полосами прокрутки, я не уверен, почему они вызывают поведение, которое вы наблюдаете. Но если вы удалите их, это должно решить вашу проблему.
Смотрите: http://jsfiddle.net/jNWUm/23/.
У меня такая же проблема. Если я поставлю
$(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.
Для людей, которым нужны настройки переполнения, обходной путь должен использовать такую анимацию.
$('#element_id').stop().animate({ scrollTop: 0 }, 500);
Кажется, это ведет себя лучше, чем .scrollTop(0),
Я только что проверил следующее в IE8 и Chrome, и оба работают:
$(window).scrollTop(0)
У меня была такая же проблема с прокруткой в chrome, Причина была height:100% стиль в body а также html, Смотрите этот ответ
К вашему сведению, если не в верхнем теле, то есть в iframe, просто попробуйте window.top.scrollTo(0,0);
Также проверьте этот ответ: scrolltop не работает на 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);
}
Это нормальное поведение, когда в вашем CSS вы объявляете overflow: hidden за html или же body элементы dom, как вы можете прочитать в документации по jQuery API:
Положение вертикальной прокрутки совпадает с количеством пикселей, которые скрыты от просмотра над областью прокрутки. Если полоса прокрутки находится в самом верху или элемент не прокручивается, это число будет равно 0.
С overflow: hidden полоса прокрутки не видна, поэтому элемент не прокручивается, поэтому число будет равно 0 в каждом (интересно) браузере, который вы будете использовать.
У меня была эта проблема на MacOS. Я пытался поставить:
$(window).scrollTop(0);
document.body.scrollTop = document.documentElement.scrollTop = 0;
в $(window).load и это все еще не работало.
Тогда я попытался использовать какой-то трюк:
$('body')
.css('position', 'fixed')
.delay(200)
.promise()
.done(function() {
$('body').css('position', 'relative');
});
и все работало нормально! Положение фиксированного рода отрывает <body> от <html> который эффективно устанавливает позицию прокрутки окна в ноль. Затем с задержкой в 200 миллисекунд (просто чтобы быть на более безопасной стороне), я положил position: relative назад.
Надеюсь, это поможет. Благодарю.
В Chrome теперь можно использовать оба
element.scroll(0,0)а также
window.scroll(0,0)для прокручиваемого элемента (с содержимым, превышающим его размер, и некоторыми
element {overflow: auto}в CSS) или для всей страницы, как показано в этом jsfiddle здесь.
Чтобы улучшить общий UX, рекомендуется также использовать
element {scroll-behavior: smooth;}тоже - этот вариант является альтернативой использованию анимации - как упоминалось в предыдущем ответе (или непосредственно в
html {scroll-behavior: smooth;}вместо).
$('#element-id').prop('scrollTop', 0); также должен сделать свое дело.
Этот код был протестирован в Chrome. 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
);
}
};
})();