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

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

16 голосов
/ 06 января 2009

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

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

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

<a name="pagelocation">

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

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

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

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

Обновление 1

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

Ответы [ 7 ]

18 голосов
/ 06 января 2009

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

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

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

5 голосов
/ 03 марта 2014

JS Solution

Запустите эту функцию на документе готово. 

 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;
    }
}
5 голосов
/ 06 января 2009

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

2 голосов
/ 30 октября 2009

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

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

2 голосов
/ 06 января 2009

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

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

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

1 голос
/ 01 июля 2013

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

1 голос
/ 06 января 2009

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

...