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

StackOverflow https://stackoverflow.com/questions/1418838

  •  07-07-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение 3

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

Другие советы

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

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

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

HTML:

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

CSS:

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

у меня сработало нормально

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

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

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

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

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

но вам все равно придется регулировать высоту с помощью JavaScript

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top