Получение позиции смещения якоря

Question

Я пытаюсь прокрутить окно до местоположения на моей странице, основываясь на выборе пользователя. Я получаю некоторые странные результаты. Может ли кто-нибудь предложить хороший/лучший способ сделать это?

Вот что я работаю с:

var rel = $(this).attr('rel'); 
var citation = rel.split("-")[0]; 
window.scrollTo(0, $('[name = ' + citation + ' ]').offset().top); 
alert($('[name = ' + citation + ' ]').offset().top); 

Последнее предупреждение дает мне номер, который, кажется, не так и прокрутка не работает. Следующий код выполняется, когда пользователь нажимает ссылку в документе. Я фиксирую значение атрибута rel этого элемента и (после небольшой манипуляции с строкой), используя его, чтобы найти позицию соответствующего якоря. Атрибут имени элемента назначения должен соответствовать атрибуту rel для указанной ссылки. Смотрите, что я имею в виду?

Спасибо!

Answer 1

Мне удалось обойти это, не используя offset(), но используя функцию position() jQuery.

Я просто получаю свойство «сверху» возвращенного объекта. Я должен использовать текст элемента как значение индекса, потому что у этих элементов не было уникальных идентификаторов.

var citationIndex = parseInt($(this).text() - 1); 
var elementOffset = $('.HwCitationsContent li:eq(' + citationIndex + ')').position().top; 

Answer 2

Вы должны использовать scrollTop вместо offset, так как ваша цель - прокрутить окно.

Answer 3

Этот код должен работать:

var rel = $(this).attr('rel'); 
var citation = rel.split("-")[0]; 
window.scrollTo(0, $('[name = ' + citation + ' ]').scrollTop()); 
alert($('[name = ' + citation + ' ]').scrollTop()); 

Я хотел бы добавить, однако, что ваш селектор имени там не гарантирован быть уникальными, и в этом случае вы получите странные эффекты. Идентификаторы должны быть уникальными на странице, имя не обязательно должно быть. Просто подсказка.

Answer 4

Это еще один простой Oldschool способ прокрутки в HTML элемента:

// scrolls to the element with id='citation' 

var node = document.getElementById('citation');  
node.scrollIntoView(); 

Answer 5

Если бы подобные проблемы, но jQuery's scrollTo плагин спас мою жизнь.