it-swarm-ru.tech

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

У меня есть URL с привязкой, которая работает как следует:

site.com/item/id#comment-233

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

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

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

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

32
Martin

Предполагая, что ваш тег <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>
24
Damp

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

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

.anchor {
    position:relative;
    top:-30px; /* or whatever value you need */
}
10
Mark
.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/

7
lincolnge

Добавляем "display: block;" сработало для меня:

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

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

Этот код работает на 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: мы используем его, чтобы избежать дополнительного вертикального пробела, вызванного &nbsp;, который, в свою очередь, необходим для кросс-браузерной совместимости.

4
danieleds

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

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

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

0
Chris Nicola