HTML: создание ссылки на якорь с центром в середине страницы

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

17
anchor center html

10 ответов

Я нашел решение Якорные Ссылки С Фиксированным Заголовком опубликовано Филлип, он веб-дизайнер. Филипп добавил новый пустой пролет в качестве якорной позиции.

<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;
}

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

10

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

8

HTML-код:

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

css:

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

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

7

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

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

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

3

мое решение: поставить <span class="anchor" id="X"> затем стиль класса "якорь", как: 

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

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

проверить https://www.w3schools.com/cssref/css_units.asp для получения дополнительной информации.

3

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

2

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

1

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

0

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

0

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

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 и выше, поэтому он довольно безопасен в использовании.

0