Скроллинг по локальным ссылкам и fixed-элементы - как подружить?

GRIG · July 24, 2013

Как известно, если в HTML-документе в одном месте написать:


<a href="#location">Переход куда-то</a>

А потом в другом месте написать еще


<a name="location"></a>

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

Пока на странице нет никаких выкрутасов с CSS - все хорошо. Но мне понадобилось разместить на странице блок с таким набором свойств:


position: fixed;
top: 0;
left: 0;
width: 1207px;
height: 184px;
z-index: 10;

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

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


position: relative;
top: -200px;

Результат оказался достаточно забавный. И, что значительно хуже, оказался зависящим от броузера. А именно:

- Хром 28-й версии - честно прокрутил страницу так, что нужная точка оказалась чуть ниже шапки и потому была видна. И так он делал всегда при клике по всем возможным локальным ссылкам (каковых у меня около 15 штук)

- Мозилла 22-й версии - в зависимости от каких-то непонятных мне условий действовала по разному: при клике на одних ссылках она прокручивала страницу так, что нужная точка оказывалась ниже шапки, при клике на других ссылках она прокручивала страницу так, что нужная точка оказывалась скрыта шапкой. Разобраться с причинами не смог, так что обошел это изменением свойства "top" у некоторых точек перехода.

- Эксплорер 9 и Сафари 5.1.7 - всегда прокручивали страницу так, что нужная точка оказывалась закрыта шапкой.

Особая неприятность заключается в том, что сайт - реклама некоего мероприятия, и потому должен быть хорошо виден всем. Ну в крайнем случае подавляющему большинству. При этом Эксплорер считается самым распространенным броузером для виндов, а Сафари - для маков. И как раз на них и случается самый неприятный косяк.

ВОПРОС: есть ли кросс-броузерное решение, которое обеспечит при всех возможных вариантах поведение как у Хрома? Или хотя бы как у Мозиллы? Применение яваскрипта допускается.

Switch74 · July 25, 2013

я бы воспользовался js скриптом, там можно указать поправку на fix элементы

что-нибудь вроде этого


var obj = document.location.hash;
var offset = $(obj).offset();
var offsetTop = offset.top - 200;
$('body,html').animate({'scrollTop':offsetTop}, 200);

естесно сделать поправочку на укзатель объекта name или id это будет, а может быть еще какой параметр

Edited July 25, 2013 by Switch74

GRIG · July 25, 2013

Продолжение истории.

Решил еще раз проверить ситуацию на таком вот простом файле:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf8">
<TITLE>очередной тест</TITLE>
<style type="text/css" >
.header { position: fixed; top: 0; left: 0; width: 1200px; height: 170px; border: solid red 3px;
background-color: transparent; text-align: center; vertical-align: middle;
}
.anchor { position: relative; top: -200px; }
.fill { width: 1200px; height: 170px; }
.test1 { width: 300px; border: solid 2px green; background-color: white; }
.test2 { width: 300px; border: solid 2px blue; background-color: yellow; }
</style>
</head>
<body>
<div class="header">
Это большой заголовок<br/>
<a href="#pos1">Ссылка 1</a>
<a href="#pos2">Ссылка 2</a>
<a href="#pos3">Ссылка 3</a>
<a href="#pos4">Ссылка 4</a>
<a href="#pos5">Ссылка 5</a>
</div>
<div class="fill"> </div>
<div class="test1">
<a name="pos1" class="anchor"></a>
Точка 1<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="test2">
<a name="pos2" class="anchor"></a>
Точка 2<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="test1">
<a name="pos3" class="anchor"></a>
Точка 3<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="test2">
<a name="pos4" class="anchor"></a>
Точка 4<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="test1">
<a name="pos5" class="anchor"></a>
Точка 5<br/><br/><br/><br/><br/>
</div>
</body>
</html>

Испытания проводились на компе, на котором установлен линух и виртуальная виндовая машина с ХРюшей. На эту виртуальную машину я поставил все 4 броузера.

Что ожидалось: красная рамка под верхним краем окна с заголовком и ссылками, при клике на ссылках 1, 2 и 3 - скроллинг к соответствующей точке в файле так, что соответствующая надпись и цветная рамка вокруг нее оказывается чуть ниже рамки. (точки 4 и 5 оказываются слишком близко к концу документа, так что по ним переходить смысла нет).

Результаты такие:

- Мозилла 22 - как задумано (без того неприятного эффекта, о котором писал в начале)

- Хром 28 - как задумано. НО: так он стал себя вести только после появления контейнеров div вокруг точек перехода. Если же теги "a" были на самом верхнем уровне структуры документа - то не было вообще никакого скроллинга.

- Эксплорер 8 в режиме совместимости - при скроллинге точка перехода оказывалась в верхнем левом углу экрана, т.е. внутри красной рамки (т.е. тот самый эффект, с которого все началось)

- Эксплорер 8 без режима совместимости - как задумано

- Сафари 5.1.7 - повторился тот эффект, с которого все началось.

Чего теперь делать - как-то непонятно

Edited July 25, 2013 by GRIG

GRIG · July 25, 2013

Итог:

Для тестового примера из предыдущего сообщения вроде бы получилось сделать задуманное путем добавления в него следующего фрагмента кода:


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery( document ).ready( function () {
  $( 'a[href^=#]' ).bind( 'click', anchor_onclick );
} );
function anchor_onclick( e )
{
  $(document).scrollTop( $( 'a[name=' + $(this).attr('href').substring(1) + ']' ).offset().top );
  return false;
}
</script>

Проверил во всех 4 броузерах - результат как задумано, и при этом внешним ссылкам не мешает жить.

Sign In

Скроллинг по локальным ссылкам и fixed-элементы - как подружить?

Question

GRIG

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

GRIG

Link to comment

Share on other sites

GRIG

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information