É 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 link , mas com a página rolada para baixo 100 pixels.
Você pode rolar para uma determinada posição usando o plug-in scrollTo do jQuery . Se você der uma olhada em sua página de demonstração , verá que o plug-in é capaz de várias opções diferentes, incluindo rolando 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 vanilla para algum lugar na página é feito por meio de um ponto de ancoragem já presente na página.
Isso pode ser criado usando a tag <a>…</a> . Observe que o link especificado em "ponto de ancoragem" (acima) tem #h-12.2 no final. Isso corresponde a <a id="h-12.2">12.2</a> incorporado no HTML que forma a página e, quando clicado, reposicionará a visualização da página a essa âncora.
Observe que antes do HTML5, o atributo name era usado na tag de âncora, mas não é mais suportado e o atributo id deve ser usado em seu lugar (reference ). Isso também significa que você pode usar qualquer elemento para uma tag de âncora, você não está limitado ao elemento <a> .
Tente clicar com o botão direito e Inspecionar elementos na página. Você encontrará as tags <a> , esses são os pontos de ancoragem.
Em seguida, retire o < antes do primeiro e último a para que eles não sejam exibidos como os links. Você pode ver os efeitos enquanto escreve na caixa de resposta quando mostra a pré-visualização abaixo.
a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>
e
a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>
Como você pode ver, a única diferença é no final, onde os nomes da âncora após o símbolo libra ( # ). o nome depois de > é como o link é lido para o usuário.
Nesse caso, "pergunta-cabeçalho" é lida como "pergunta" e as respostas são as mesmas.
Em seguida, o link a seguir deve Mike comente . Como o ponto de ancoragem é 382094
Para esclarecer, você pode simplesmente encontrar a âncora e adicionar o # após o seu link.
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#880079
tudo isso levará você a lugares diferentes na mesma página.
Para criar um link para uma posição específica de pixel em uma página, coloque a tag de âncora dentro de uma div que esteja posicionada absolutamente usando as coordenadas "top: x left: y".
Você pode usar Citebite para vincular a uma posição específica de uma página da Web, mesmo que não use id nessa posição. É fácil de usar. Basta ir até o link fornecido aqui e, em seguida, colar o trecho do texto que você deseja mostrar primeiro depois de acessar sua página no campo de texto Citação e fornecer o link da página no campo de texto URL de origem. Em seguida, clique em Make Citebite. Então, ele irá gerar um link. Esse link será o seu link desejado.