HTML: создание ссылки, ведущей к якорю по центру страницы.

У меня есть ссылка на якорь на моей html-странице. При нажатии на ссылку страница прокручивается до якоря, так что якорь находится в самом верху видимой части страницы. Как я могу сделать так, чтобы страница прокручивалась так, чтобы якорь был в середине страницы?


html center anchor
person olamundo    schedule 13.09.2009    source источник

Ответы (10)


arrow_upward
19
arrow_downward

Я нашел решение привязывать ссылки с фиксированным заголовком, опубликованное Филиппом. , он веб-дизайнер. Филипп добавил новый ПУСТОЙ пролет в качестве позиции привязки.

<span class="anchor" id="section1"></span>
<div class="section"></div>

затем поместите следующий код css

.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}

Спасибо, Филипп!

person charles.cc.hsu    schedule 18.03.2015

arrow_upward
14
arrow_downward

Поместите <span class="anchor" id="X">, затем стилизуйте класс anchor следующим образом:

.anchor {
  position: absolute;
  transform: translateY(-50vh);
}

С -50vh якорь будет прокручиваться в середине экрана.

person Gianluca Pietrobon    schedule 27.12.2017
comment
Это выглядит как очень красивое и чистое решение. Остерегайтесь поддержки браузера: w3schools.com/cssref/css3_pr_transform.asp - person cgogolin; 05.04.2018
comment
Блестящий ответ! Однако не полностью: я бы также добавил top:50% к классу .anchor. И обратите внимание, что родитель якоря должен иметь атрибут относительной или абсолютной позиции. - person Insider; 11.06.2021

arrow_upward
10
arrow_downward

HTML:

<a id="anchor">NEWS</a>

CSS:

#anchor{
position: relative;
padding-top: 100px; //(whatever distance from the top of the page you want)
}

отлично работал для меня

person jakub    schedule 12.03.2011
comment
Отлично! Это не может быть проще. - person fbiazi; 17.09.2015
comment
Это было решение, которое сработало для меня. Самый популярный ответ - нет. - person Eosis; 17.06.2020

arrow_upward
7
arrow_downward

Нет прямого способа сделать это в чистом html\css. Это возможно, используя js, получая верхнее расположение элемента и устанавливая верхнее положение страницы в положение этого элемента минус половина высоты страницы.

person olamundo    schedule 02.10.2009

arrow_upward
4
arrow_downward

если вы хотите без пробела, сделайте это так:

<h2 id="jump_tag" style="padding-top: 500pt; margin-top: -500pt;"></h2>

но вам все равно придется регулировать высоту из javascript

person Sly_TheKing    schedule 25.07.2016

arrow_upward
2
arrow_downward

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

person Tomas Aschan    schedule 13.09.2009
comment
В зависимости от ширины окна браузера и способа перемещения страницы этот метод может привести к тому, что фактическая привязка окажется ниже области просмотра. Я бы выбрал решение с javascript, признавая, что браузерам без javascript просто придется иметь дело без этой причудливой функции. - person Carl G; 15.01.2012

arrow_upward
2
arrow_downward

Расширяя ответ charles.cc.hsu, мы можем сделать это для элементов произвольной высоты, используя модуль CSS vh, который относительно высоты области просмотра.

HTML:

<span class="anchor" id="section1"></span>
<div class="section"></div>

CSS:

.anchor{
    display: block;
    height: 50vh; /* 50% viewport height */
    margin-top: -50vh;
    visibility: hidden;
}

vh поддерживается в IE9 и более поздних версиях, поэтому его довольно безопасно использовать.

person Ruby Tunaley    schedule 16.08.2018

arrow_upward
1
arrow_downward

Поскольку «середина страницы» относится к размеру экрана и окна пользователя в любой момент времени, вам придется использовать Javascript для достижения этого, поскольку в чистом HTML/CSS нет способа получить вертикальный экран. ширина.

person Triptych    schedule 02.10.2009
comment
ширина экрана по вертикали, она же высота экрана? - person LarsH; 18.08.2010

arrow_upward
0
arrow_downward

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

person edeverett    schedule 13.09.2009

arrow_upward
0
arrow_downward

Firefox поддерживает установку свойства padding-top для именованного якоря. Оттуда вы можете установить файл cookie с помощью javascript, который содержит размеры браузера, и соответствующим образом настроить отступы на стороне сервера. Для конечного пользователя это будет выглядеть как чистый html/css, но noam прав в том, что для получения размеров браузера требуется немного JS, поскольку он не дает вам эту информацию без небольшого принуждения.

person Community    schedule 08.10.2009