É possível criar um hiperlink para uma posição de rolagem específica em uma página da web? Por exemplo, eu gostaria de criar um link para http://www.stackoverflow.com/ , mas com a página rolada para baixo em 100 pixels.
Respostas:
Você pode rolar para uma determinada posição usando o plugin jQuery scrollTo . Se você der uma olhada na página de demonstração , verá que o plug-in é capaz de várias opções diferentes, incluindo rolagem para uma determinada posição. Isso significaria que você teria que controlar o JavaScript do alvo, portanto, isso pode não ser adequado para um link para um site externo.
O link da forma baunilha para algum lugar da página é por meio de um ponto de ancoragem já presente na página.
Isso pode ser criado usando a <a>…</a>tag Observe que o link especificado em "ponto de ancoragem" (acima) tem #h-12.2no final. Isso corresponde ao <a id="h-12.2">12.2</a>incorporado no HTML que forma a página e, quando clicado, reposicionará a exibição da página nessa âncora.
Observe que antes do HTML5, o nameatributo era usado na tag anchor, mas não era mais suportado e o idatributo deveria ser usado em seu lugar ( referência ). Isso também significa que você pode usar qualquer elemento para uma tag de âncora; você não está limitado ao <a>elemento.
Tente clicar com o botão direito do mouse e Inspecionar elementos na página. Você encontrará as <a>tags, esses são os pontos de ancoragem.
Em seguida, retire o <antes do primeiro e o último apara que eles não apareçam como links. Você pode realmente ver os efeitos enquanto escreve na caixa de resposta quando mostra a visualização abaixo.
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>
e
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>
Como você pode ver, a única diferença está no final em que a âncora nomeia o #símbolo da libra ( ). o nome após o >é para como o link lê para o usuário.
Nesse caso, "cabeçalho da pergunta" é lido como "pergunta" e as respostas são as mesmas.
Em seguida, o seguinte deve estar vinculado ao comentário de Mike . Como o ponto de ancoragem é382094
Para esclarecer, você pode simplesmente encontrar a âncora e adicionar o #link depois.
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#880079
tudo isso levará você a lugares diferentes na mesma página.
Para vincular a uma posição específica de pixel em uma página, coloque a tag anchor dentro de uma div posicionada absolutamente usando as coordenadas "top: x left: y".
Você pode usar o Citebite para vincular a uma posição específica de uma página da web, mesmo que ela não use o ID nessa posição. É fácil de usar. Basta ir ao link que forneci aqui e colar o pedaço do texto que você deseja mostrar primeiro depois de acessar sua página da web no campo de texto Citação e fornecer o link da página da web no campo de texto URL de origem. Em seguida, clique em Make Citebite. Então ele irá gerar um link. Esse link será o link desejado.