Почему иногда не хватает привязки страниц?
На странице HTML такая ссылка:
<a href = "#pagelocation">Location on Page</a>
... должен перейти к этому месту на странице:
<a name = "pagelocation">
Но по моему опыту, он иногда не работает, особенно при переходе по ссылке с другой страницы (например, <a href = "somepage.html#pagelocation">). Под "промахами" я подразумеваю, что он прокручивается не в то место на странице - может быть, близко, а может, и нет.
Обычно целевое местоположение оказывается вверху экрана. Я знаю, что это может потерпеть неудачу, если под привязкой недостаточно места, чтобы прокрутить ее до верхней части экрана.
Почему еще он потерпит неудачу? Это вообще от верстки зависит? Как я могу это исправить?
(Я сохраняю это общее, потому что мне нужен всеобъемлющий справочный ответ.)
Обновление 1
Спасибо за указатели о неявных размерах изображений. Но как насчет страницы, где все элементы имеют явный размер? (Сейчас я имею дело с одним.)
Ответы 7
Я считаю, что наблюдаемое вами поведение является результатом того, что браузер обнаружил это место на странице до того, как все изображения завершили загрузку. После завершения загрузки изображений макет страницы изменился (например, страница, вероятно, стала длиннее по вертикали), что привело к изменению местоположения привязки, но браузер все еще думает, что он уже перешел к этому якорь.
Довольно часто прокрутка может происходить до того, как страница загрузилась. Если у вас есть изображения без ширины и высоты, страница перескочит, затем загрузит изображение и изменит макет, в результате чего место, которое вы ранее перешли, будет казаться неправильным.
Обновлено: все остальное, что может изменить макет страницы, также следует рассматривать с подозрением ... это включает javascript и CSS, которые не загружены в <head> (неважно, что все CSS должен загружаются в голову; это не всегда).
Если страница отскакивает через перенаправление, я считаю, что IE будет прокручивать конечную страницу, а Firefox - нет.
У меня тоже есть эта проблема для моих якорей "Оглавление". Особенно когда нажимается кнопка «Назад», а затем «Вперед», когда страница загружается, нажатие на любую ссылку привязки ничего не делает, пока страница не загрузится полностью. У меня есть несколько отложенных скриптов, и некоторые из них должны создавать некоторые элементы на странице.
Обратите внимание, что вы можете добавить id = "pagelocation" практически к любому элементу HTML с тем же результатом, что избавит вас от добавления дополнительных якорей для мест назначения ссылок.
Как бы вы структурировали ссылку?
То же самое - <a href = "#pagelocation"> Местоположение на странице </a>
Как упоминалось выше, это, вероятно, связано с задержкой рендеринга изображений и «корректировкой» макета при загрузке.
Если вы можете указать размер изображений, то столько места можно выделить до их рендеринга, что должно предотвратить проблему.
В качестве побочного примечания у меня раньше была эта проблема в виде использования перемотки вперед / назад между достаточным количеством страниц, которые требовали перезагрузки изображений, из-за чего я оказывался в неправильном месте после их рендеринга.
Я также видел, как это происходит, когда JavaScript создает раскрывающееся меню вверху страницы. Затем, как только меню будет завершено, оно скрывается, прокручивая содержимое ниже.
Тем временем браузер уже установил целевое местоположение в верхней части окна. Скрытие меню в самом верху страницы перемещает целевое местоположение вверх за пределы верхней части окна.
ОК. Думаю, это ново. Использование HTML5 autofocus приведет к пропуску зажигания, как и метод jQuery focus(). Потребовалось 90 минут проб и ошибок, чтобы обнаружить это, потому что я думал, что проблема связана с изображением :)
JS решение
Запустите эту функцию для готового документа.
function goToAnchor() {
hash = document.location.hash;
if (hash ! = "") {
setTimeout(function() {
if (location.hash) {
window.scrollTo(0, 0);
window.location.href = hash;
}
}, 1);
}
else {
return false;
}
}
сэкономил мне много времени, простая концепция .. должна быть! где нужно рендерить много изображений ..
Я думаю, что также могут быть проблемы, если цель находится в плавающем контейнере или контейнер позиционируется с использованием любого другого метода, кроме 'static', поскольку это нарушает естественный поток документа ...