Как рассчитать offsetTop элемента внутри div - возвращает ноль?

Question

У меня есть div "контент" с якорем id="one" внутри него.

Прямо сейчас я использую событие onClick из внешней ссылки, чтобы прокрутить «контент» на пиксельное расстояние, чтобы вывести «один» в поле зрения, не заставляя остальную часть страницы перемещаться, и она работает хорошо и плавно, как и планировалось. .

onClick="document.getElementById('content').scrollTop = 400;

но я бы предпочел вычислить точное offsetTop расстояние "единицы" и прокрутить это расстояние вместо моих произвольных чисел.

Вот что я пытаюсь:

<script type="text/javascript">
<!--
var topPos = document.getElementById('one').offsetTop;
//-->
</script>

и

onClick="document.getElementById('content').scrollTop = topPos;

с

<a id="one"></a> being how I ID the element within the content.

Но topPos возвращает ноль! Я не могу пройти через это. Я не знаю, мои ли это плохие навыки работы с JavaScript (возможно) или тот факт, что мой css не предоставляет никаких чисел. Я не использую фиксированное позиционирование, если это имеет значение. Кто-нибудь может сказать мне мою явную ошибку? Заранее спасибо.

Answer 1

Любая причина не использовать scrollIntoView()?

https://developer.mozilla.org/en/DOM/element.scrollIntoView

Answer 2

В зависимости от того, где находится скрипт, это может быть связано с тем, что в браузере еще недостаточно информации для получения topPos. Попробуйте разместить скрипт внизу страницы или запустите его в ответ на событие загрузки страницы. В качестве альтернативы, вместо расчета вперед, просто вызовите функцию onClick для вычисления позиции и установки прокрутки.