HTML: Создание ссылки приводит к привязке по центру страницы

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

HTML:

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

CSS

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

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

Ответ 4

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

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

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

Ответ 5

если вы хотите без пробела, сделайте следующее:

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

Ответ 11

transform: translateY (-50vh);}

Спасибо, сработало для меня, но у меня есть 2 прокрутки на одной странице, одна в общем, а другая в div Я использовал переполнение: scroll

Требуется изменить эту позицию только для этого div, а не для общего