HTML: создание ссылки, ведущей к якору по центру страницы - PullRequest
Новая
       19

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

21 голосов
/ 14 сентября 2009

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

Ответы [ 10 ]

12 голосов
/ 18 марта 2015

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

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

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

8 голосов
/ 12 марта 2011

HTML: 

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

CSS: 

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

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

7 голосов
/ 02 октября 2009

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

6 голосов
/ 27 декабря 2017

Поместите <span class="anchor" id="X">, затем введите класс anchor как: 

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

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

3 голосов
/ 25 июля 2016

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

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

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

2 голосов
/ 14 сентября 2009

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

1 голос
/ 16 августа 2018

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

1 голос
/ 02 октября 2009

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

0 голосов
/ 08 октября 2009

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

0 голосов
/ 14 сентября 2009

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

...