Привязные ссылки и поля

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

Пример исходного кода

<html>
<body>

<div style="position:fixed; top:0px; height:100px; background:white;">
This covers the top 100px of the screen.
</div>

<div style="position:absolute; top:0px;">

<div>
<a name="foo" id="foo"><h2>Foo</h2></a>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores e
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.
</p>
</div>

<div>
<a name="bar" id="bar"><h2>Bar</h2></a>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.   
</p>
</div>

</div>

</body>
</html>

Скажите, что этот HTML-код доступен в http://example.com/foobar.html, который можно было бы связать с http://example.com/foobar.html/#bar - браузером будет прокручиваться до якоря с именем /id "bar". Но в этом примере есть тот фиксированный элемент размером 100 пикселей, который будет препятствовать верхним частям содержимого "Бар". Теперь я хотел бы иметь некоторый стиль/параметр, который сообщает браузеру, а не прокручивать элемент до верхней части окна документа, но оставлять определенный "запас прокрутки" (в данном случае запас прокрутки около 200 пикселей). Речь идет не о границах элементов, поскольку они влияют на макет. Но речь идет не о макете, а о подсказках для прокрутки.

Ответ 1

Чтобы получить решение для кросс-браузера/кросс-устройства, где ваш якорь действительно invisible в том смысле, что он не занимает места на странице, важно, чтобы вы отформатировали якорный тег следующим образом

<a name="foo" class="top"></a>

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

И отформатируйте свой CSS следующим образом:

a.top {
position: relative;
top:-100px;
display: block;
height: 0;
width:0;
}

Использование Position: relative позволяет вытащить якорь из обычного потока страниц.

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

Браузеры, такие как Chrome, не соблюдают это позиционирование, если фактическое отображение якоря не отображается. Добавление содержимого в якорь, например  , заставит якорь отобразиться, но во многих случаях это создаст вертикальное пространство размером с высоту строки <a>, поэтому лучше установить display на block и width и height до 0.

Ответ 2

Вот мое решение: http://jsfiddle.net/ufewB/

HTML

<div id="container">
    <div id="fixed">
        Fixed position element
        <a href="#foo" alt="foo">Jump to foo</a>   
    </div>
    <div id="spacer"></div>
    <a id="foo"></a><h2>Foo</h2>

    <p>Lorem ipsum text</p>
    <div id="spacer"></div>
</div>

CSS

#fixed {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100px;
    background-color:red;
}
#spacer { height:800px; }
* { margin:0px; padding:0px; }
#container { width:960px; margin:auto; }
#foo { position:relative; top:-100px; }

В принципе, я дал <a id="foo"> </a> CSS position:relative; top:-100px, и я взял все элементы, содержащиеся внутри якоря, и поставил их рядом с якорем. Я сделал это, потому что вы по существу создаете невидимую ссылку, удаляя ее из обычного потока документов и позиционируя ее на 100 пикселей выше, чем обычно.

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