Почему анкоры страниц иногда промахиваются?

На HTML-странице такая ссылка:

<a href="#pagelocation">Location on Page</a>

... должен перейти к этому месту на странице:

<a name="pagelocation">

Но по моему опыту, иногда это не удается, особенно при ссылке с другой страницы (например, <a href="somepage.html#pagelocation">). Под промахами я подразумеваю, что он прокручивается в неправильное место на странице — может быть близко, а может и нет.

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

Почему еще это может провалиться? Это вообще зависит от компоновки? Как это исправить?

(Я сохраняю это общее, потому что мне нужен универсальный справочный ответ.)

Обновление 1

Спасибо за подсказки о неявных размерах изображений. Но как насчет страницы, где все элементы имеют явный размер? (Сейчас я имею дело с одним.)


html anchor
person Nathan Long    schedule 06.01.2009    source источник

Ответы (7)


arrow_upward
18
arrow_downward

Довольно часто прокрутка может происходить до завершения загрузки страницы. Если у вас есть изображения без ширины и высоты, страница будет прыгать, а затем загружать изображение и изменять макет, делая место, где вы ранее прыгали, кажущимся неправильным.

Редактировать: все остальное, что может изменить макет страницы, также следует рассматривать с подозрением... это включает javascript и CSS, которые не загружаются в <head> (неважно, что весь CSS должен загружаться в голову, это не всегда).

Если страница перенаправляется через перенаправление, я полагаю, что IE прокрутит конечную страницу, а Firefox — нет.

person Greg    schedule 06.01.2009
comment
Я думаю, что также могут быть проблемы, если цель находится в плавающем контейнере или контейнер позиционируется с использованием любого другого метода, кроме «статического», поскольку это нарушает естественный поток документа... - person HorusKol; 10.10.2010
comment
У меня тоже есть эта проблема для моих якорей оглавления. Особенно, когда нажата кнопка «Назад», а затем «Вперед», когда страница загружается, щелчок по любой якорной ссылке ничего не делает, пока страница не загрузится полностью. У меня есть несколько отложенных сценариев, и некоторые из них должны создавать некоторые элементы на странице. - person JAT86; 02.05.2018

arrow_upward
7
arrow_downward

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;
    }
}
person Edd Smith    schedule 03.03.2014
comment
сэкономил мне много времени, простая концепция .. must have! где нужно отрисовать много изображений.. - person Pavitar; 22.10.2016

arrow_upward
5
arrow_downward

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

person matt b    schedule 06.01.2009

arrow_upward
2
arrow_downward

Как упоминалось выше, это, вероятно, связано с поздним рендерингом изображений и «корректировкой» макета по мере их загрузки.

Если вы можете указать размер изображений, то столько места может быть выделено до их рендеринга, что должно предотвратить проблему.

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

person DrHazzard    schedule 06.01.2009

arrow_upward
2
arrow_downward

Я также видел, как это происходит, когда JavaScript создает раскрывающееся меню в верхней части страницы. Затем, как только меню будет готово, оно будет скрыто, прокручивая содержимое ниже.

Тем временем браузер уже установил целевое местоположение в верхней части окна. Скрытие меню в самом верху страницы перемещает целевое местоположение вверх за пределы верхней части окна.

person JSchaefer    schedule 29.10.2009

arrow_upward
1
arrow_downward

Обратите внимание, что вы можете добавить id="pagelocation" практически к любому элементу HTML для получения того же результата, что избавит вас от добавления дополнительных якорей для ссылок.

person Peter Hilton    schedule 06.01.2009
comment
Как бы вы структурировали ссылку? - person Nathan Long; 06.01.2009
comment
То же самое - ‹a href=#pagelocation›Расположение на странице‹/a› - person Peter Hilton; 08.01.2009

arrow_upward
1
arrow_downward

ХОРОШО. Я думаю, что это новое. Использование autofocus в HTML5 вызовет осечку, как и метод focus() в jQuery. Потребовалось 90 минут проб и ошибок, чтобы обнаружить это, потому что я думал, что проблема связана с изображением :)

person Nick    schedule 01.07.2013