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

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

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

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

<a name="pagelocation">

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

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

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

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

Обновление 1

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

Решение 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;
    }
}

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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