У меня есть HTML-страница с внутренним DIV, используемым для контента. Внутренний DIV имеет свои собственные полосы прокрутки. Я хотел бы автоматически прокрутить до определенной позиции в DIV.
Как я могу это сделать? (Обратите внимание, что я НЕ хочу, чтобы автоматически прокручивать полосы прокрутки Window - я уже знаю, как это сделать)
Требуется кросс-платформенное решение
У div есть свойство scrollTop, которое вы можете установить (и его pal, scrollLeft).
Добавьте div (где вы хотите прокрутить):
<div id="#scroll-here">Test..</div>
и добавьте ссылку:
<a href="#scroll-here">Scroll to Test</a>
если вам нужен гладкий свиток, вы можете проверить this
существует этот .scrollTo() метод, который может помочь вам прокручивать ваши div. попробуйте более подробно посетить здесь
До тех пор, пока JavaScript допустим, я создал демонстрацию с использованием jQuery, в которой используется известный элемент с идентификатором внутри div.
$(function() {
var testOffset = $('#test').offset(),
scrollOffset = $('#scroll').offset();
$('#scroll').scrollTop(testOffset.top - scrollOffset.top);
});
Если вы знаете только, насколько далеко, с точки зрения пикселей, а не для конкретного элемента, его можно было бы адаптировать для:
$(function() {
$('#scroll').scrollTop(100);
});
Я бы порекомендовал взглянуть на scrollTo jQuery plugin. Это действительно удобный плагин, который позволяет анимировать свиток в любом элементе. Я установил небольшой пример в jsFiddle, который демонстрирует, как он работает. Пример показывает, как вы "прокручиваете" до третьего p в первом div, а затем во втором p во втором div. Стоит отметить, что для обеспечения правильности position().top вам необходимо установить для содержащего div значение position: relative;. Надеюсь, это не слишком большая проблема.:)