У меня есть ссылка на длинной HTML-странице. Когда я нажимаю на него, я хочу, чтобы div на другой части страницы отображался в окне, прокручивая его в окно.
Немного напоминает EnsureVisible на других языках.
Я проверил scrollTop и scrollTo, но они кажутся красными сельдевыми.
Может ли кто-нибудь помочь?
старый вопрос, но если кто-нибудь найдет это через google (как и я) и кто не хочет использовать привязки или jquery; там встроенная javascriptфункция "прыгать" на элемент;
document.getElementById('youridhere').scrollIntoView();
и что еще лучше; в соответствии с большими таблицами совместимости на quirksmode это поддерживается всеми основными браузерами!
Как насчет JQuery ScrollTo - см. этот пример кода
Если вы не хотите добавлять дополнительное расширение, следующий код должен работать с jQuery.
$('a[href=#target]').
click(function(){
var target = $('a[name=target]');
if (target.length)
{
var top = target.offset().top;
$('html,body').animate({scrollTop: top}, 1000);
return false;
}
});
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>
<A name='myAnchorALongWayDownThePage"></a>
Никакая фантастическая прокрутка, но она должна забрать вас.
Сложность прокрутки состоит в том, что вам может не только прокручивать страницу, чтобы показывать div, но вам, возможно, придется прокручивать внутри прокручиваемых divs на любом количестве уровней.
Свойство scrollTop доступно для любого элемента DOM, включая тело документа. Установив его, вы можете контролировать, как далеко что-то прокручивается. Вы также можете использовать свойства clientHeight и scrollHeight, чтобы узнать, сколько прокрутки необходимо (прокрутка возможна, когда clientHeight (viewport) меньше, чем scrollHeight (высота содержимого).
Вы также можете использовать свойство offsetTop, чтобы выяснить, где в контейнере находится элемент.
Чтобы создать по-настоящему общедоступную процедуру "прокрутки в представлении" с нуля, вам нужно будет начать с node, которую вы хотите открыть, убедитесь, что она в видимой части ее родительской, а затем повторите то же самое для родительский и т.д., пока вы не достигнете вершины.
Один шаг этого будет выглядеть примерно так (непроверенный код, а не проверка случаев):
function scrollIntoView(node) {
var parent = node.parent;
var parentCHeight = parent.clientHeight;
var parentSHeight = parent.scrollHeight;
if (parentSHeight > parentCHeight) {
var nodeHeight = node.clientHeight;
var nodeOffset = node.offsetTop;
var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
parent.scrollTop = scrollOffset;
}
if (parent.parent) {
scrollIntoView(parent);
}
}
Отправленный ответ здесь - то же самое решение вашей проблемы.
Изменить: ответ JQuery очень приятный, если вы хотите гладкий свиток - я не видел этого раньше.
Требуется свойство location.hash. Например:
location.hash = 'top';//будет переходить к названному якорю "top
Я не знаю, как сделать приятную анимацию прокрутки без использования dojo или какого-нибудь инструментария, подобного этому, но если вам просто нужно перейти к якорю, location.hash должен это сделать.
(тестируется на FF3 и Safari 3.1.2)
Почему не названный якорь?
Это сработало для меня
document.getElementById('divElem').scrollIntoView();
Я не могу добавить комментарий для ответа futtta выше, но для более плавного прокрутки используйте:
onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"
scrollTop (IIRC) находится там, где в документе прокручивается верх страницы. scrollTo прокручивает страницу так, чтобы верх страницы отображалась там, где вы указываете.
Здесь вам понадобятся некоторые стили, управляемые Javascript. Скажем, если вы хотите, чтобы div за пределами экрана и прокручивался справа, вы должны установить левый атрибут div в ширину страницы, а затем уменьшить его на заданную величину каждые несколько секунд, пока он не окажется там, где вы хотите.
Это должно указывать на правильное направление.
Дополнительно: Мне жаль, я думал, что вам нужен отдельный div, чтобы "выскочить" откуда-то (вроде как этот сайт иногда), а не переместить всю страницу в раздел. Правильное использование якорей достигнет такого эффекта.
В общем случае прокрутки к элементу DOM существует плагин jQuery, но если производительность является проблемой (и когда это не?), я бы предложил сделать это вручную. Это включает в себя два этапа:
quirksmode дает хорошее объяснение механизма первого. Вот мое предпочтительное решение:
function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}
Он использует отбрасывание от нуля до 0, что не является правильным этикетом в некоторых кругах, но мне оно нравится:) Вторая часть использует window.scroll. Таким образом, остальное решение:
function scrollToElement(elem) {
window.scroll(absoluteOffset(elem));
}
Voila!
Я лично нашел ответ на Josh jQuery выше, чтобы быть лучшим, что я видел, и отлично работал для моего приложения... конечно, я уже использовал jQuery... Я бы, конечно, не включил бы всю библиотеку jQ только для этой цели.
Ура!
EDIT: ОК... так что через несколько секунд после публикации этого сообщения я увидел еще один ответ чуть ниже моего (не уверен, что все еще ниже меня после редактирования), который сказал:
document.getElementById( 'your_element_ID_here') scrollIntoView();.
Это работает отлично и намного меньше кода, чем версия jQuery! Я понятия не имел, что встроенная функция в JS называется .scrollIntoView(), но вот она! Итак, если вы хотите фантастическую анимацию, перейдите в jQuery. Быстрый n 'грязный... используйте этот!
Для плавной прокрутки этот код полезен
$('a[href*=#scrollToDivId]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - head_height
}, 1000);
return false;
}
}
});
Исправьте меня, если я ошибаюсь, но я снова и снова читаю вопрос и все еще думаю, что Ангус МакКотоуп спрашивал, как установить элемент в позицию: исправлено.
Angus McCoteup, проверьте http://www.cssplay.co.uk/layouts/fixed.html - если вы хотите, чтобы ваш DIV вел себя как меню, посмотрите на CSS есть