HTML: Fazendo um link para a âncora centrada no meio da página

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

  •  07-07-2019
  •  | 
  •  

Pergunta

Eu tenho um link para uma âncora na minha página HTML. Quando o link é clicado, faz com que a página role para a âncora para que a âncora fique na parte superior da parte visível da página. Como posso fazer a página rolar para que a âncora esteja no meio da página?

Foi útil?

Solução 3

Não existe uma maneira direta de fazer isso em puro html css. É possível usar o JS, obtendo o local superior do elemento e definindo a posição superior da página na posição desse elemento menos metade da altura da página.

Outras dicas

Eu encontrei uma solução Anchor links com um cabeçalho fixo Postado por Phillip, ele é um web designer. Phillip adicionou uma nova extensão vazia como a posição da âncora.

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

Em seguida, coloque o seguinte código CSS

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

Obrigado, Phillip!

html:

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

CSS:

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

Funcionou bem para mim

Colocar um <span class="anchor" id="X"> Em seguida, estilize o anchor aula como: 

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

Com -50vh A âncora rolará no meio da tela.

Se você quiser, sem espaço em branco, faça assim:

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

Mas você ainda terá que regular a altura do JavaScript

Determine qual parte da sua página você realmente deseja no topo e coloque a âncora lá. Você não poderá mudar a maneira como os navegadores interpretam as âncoras - pelo menos não sem perturbar seus usuários.

Como o "meio da página" é relativo ao tamanho da tela e da janela do usuário a qualquer momento, você precisará usar o JavaScript para conseguir isso, pois não há como html/css puro para obter a tela vertical largura.

Estendendo -se para fora de Resposta de Charles.cc.hsu, podemos fazer isso por elementos de altura arbitrária usando o vh Unidade CSS, que é relativa à altura da viewport.

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 é apoiado no IE9 e acima, por isso é bastante seguro de usar.

Eu tentaria colocar uma margem negativa (ou outro método de posicionamento) igual à metade da altura da página na tag de âncora de destino.

O Firefox suporta definir uma propriedade de topo de preenchimento na âncora nomeada. A partir daí, você pode definir um cookie via JavaScript que contém as dimensões do navegador e ajustar seu topo de preenchimento de acordo com o lado do servidor. Para o usuário final, pareceria seu HTML/CSS puro, mas o NOAM está correto, pois é necessário um pouco de JS para obter as dimensões do navegador, pois isso não fornece essas informações sem um pouco de coerção.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top