Изменение начальной позиции по умолчанию #anchor

У меня есть URL с якорем, который работает так, как должен:

site.com/item/id#comment-233

При открытии якорь будет располагаться точно в верхней части страницы.

Как изменить начальную точку? Скажем, я хочу, чтобы он был 50px сверху.

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

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

Ответ 1

Предполагая, что тэг <a> не имеет содержимого, добавьте к нему тег класса с position:relative; top:-50px;

В зависимости от вашего документа, вы также должны обернуть его в абсолютном <div>

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

ИЗМЕНИТЬ

Это тест, который я сделал локально, и он отлично работает в FF 3.6

<html>

    <body style='margin:0; padding:0;'>
        <div style='position:fixed; height:50px; background-color:#F00; width:100%'>
        Fixed header
        </div>
        <div style='padding-top:50px'>
            <div style='height:100px; margin-top:10px; background-color:#0F0'><a href='#linkhere'>Go to anchor</a></div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>
                <a name='linkhere' style='position:relative; top:-75px;'></a>
            Link here</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
        </div>
    </body>
</html>

Ответ 2

Это сработало для меня, основываясь на приведенном выше предположении:

<a name="[my-anchor-name]" class="anchor"></a>

.anchor {
    position:relative;
    top:-30px; /* or whatever value you need */
}

Ответ 3

.anchor{
  display: block;
  height: 115px; <!--same height as header-->
  margin-top: -115px; <!--same height as header-->
  visibility: hidden;
}

<span class="anchor"></span>
<div>content...</div>

из http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/

Ответ 4

Добавление "display: block;" разработал у меня:

<a name="[my-anchor-name]" class="anchor"></a>

.anchor {
    position:relative;
    top:-50px;
    display: block;
}

Ответ 5

Этот код работает на Firefox, Chrome, IE и, возможно, и на других:

<a id="comment-3" class="shifted_anchor">&nbsp;</a>
<div>
    ... comment ...
</div>

Где это таблица стилей:

a.shifted_anchor {
  position: relative;
  top: -35px;
  margin: 0;
  padding: 0;
  float: left;
}

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

Ответ 6

Итак, я объединил пару идей здесь и придумал тот, который хорошо работает для меня и во всех браузерах. Пустые якоря, похоже, не работают с браузерами webkit, определенно не работают на Chrome. Добавление псевдоэлемента в привязку исправляет это без нарушения компоновки.

a.anchor { position: relative; top: - $offsetHeight; visibility: hidden; }
a.anchor:before {
  content:"";
  float: left;
  height: 0px;
}

Просто замените $offsetHeight тем, что вам нужно.