Я делаю платформер-головоломку, используя html-элементы в качестве препятствий. Некоторые уровни я хочу начать в нижней части документа. Поэтому я попытался использовать
$(document).ready(function() {
$(document).scrollTop($(document).height() - $(window).height());
}
а также
$(document).ready(function() {
window.scrollTo(0, document.body.scrollHeight);
}
они оба отлично работают в Firefox, но не работают в Chrome. Я мог заставить его работать только при анимации прокрутки, которая не будет работать для того, что я пытаюсь сделать.
edit: я не использую jQuery.toScroll(). Я пробовал vanilla toScroll и jQuery.scrollTop().
Возможный дубликат $.scrollTo не работает в Chrome
Я не проводил полное тестирование, но у меня также возникла проблема с помощью инструментов разработчика, по крайней мере, в определенной версии jQuery и последней версии Chrome. animate
работает. scrollTop
и scrollTo
не работают. Тем не менее, даже если вы прямо сказали, что не хотите использовать анимацию, я все равно рекомендую ее, поскольку она работает, и я не вижу причин не использовать ее, если вы используете ее следующим образом:
$('html, body').animate({scrollTop: 500}, 0);
Это будет прокручиваться до 500 пикселей и вообще не будет анимации, потому что продолжительность установлена на 0. Я также должен указать на предыдущую проблему с Chrome:
Я знаю, что проблема закрыта, но она может быть актуальной, и, вероятно, о ней следует сообщить, потому что есть что-то подозрительное.
Я пробовал это, и это не работает, когда для анимации установлено значение 0, 0,1, кажется, работает, но это не кажется очень элегантным.
@Truce 0 действительно работает, я пробовал его до того, как опубликовал этот ответ, по крайней мере, в версии jQuery, которую я тестировал.
Браузеры прикрепляют свои полосы прокрутки к странице по-разному. Используйте $('html,body').scrollTop(). Вы также должны использовать $(window).innerHeight(). Так...
$('html,body').scrollTop($(document).height() - $(window).innerHeight());
//Or to smooth scroll it
$('html,body').animate({
scrollTop: $(document).height() - $(window).innerHeight()
}, 1000);
Примечание. $(document).height() вернет то же значение, что и $(window).innerHeight(), если документ короче окна.
Я обнаружил, что проблема в том, что я использовал jQuery 2 :( Я не знаю почему, потому что все мои другие проекты используют самую новую версию. В любом случае спасибо за помощь!
Я также должен отметить, что $(document).height() вернет то же самое, что и $(window).innerHeight(), если документ короче окна. Для ваших целей это не имеет значения, поскольку цель состоит в том, чтобы просто прокрутить вниз, и если документ короче, чем окно, вы все равно уже находитесь внизу.
Укажите, с какой версией jQuery и браузера вы столкнулись.