Como posso criar um link para uma posição específica em uma página da web? [fechadas]

14

É 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.

html scrolling hyperlink Anderson Green
fonte
Eu gostaria que houvesse uma maneira de vincular a uma posição específica usando pixels no URL.
akinuri

Respostas:

3

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.

Amos M. Carpenter
fonte
14

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.

Paulo
fonte
6

Semelhante à resposta de Paul, você também pode vincular à primeira ocorrência de um ID de marca em um documento HTML. Este não será um número exato de pixels.

Por exemplo, vincule / role para as perguntas ou respostas desta página .

Mike Fitzpatrick
fonte
6

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.

Georgeq
fonte
Isso funciona apenas para IDs ou para classe também? Por exemplo, se eu tivesse um elemento, digamos, <h3 class = "theClass"> Cabeçalho </h3>, como posso vincular esse elemento que não possui um valor de atributo de ID?
Ulysses Alves
1

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".

Graeme
fonte
Eu usei isso na construção de um site responsivo onde o menu foi fixado na parte superior. Os alvos normais colocam a parte superior da seção posicionada atrás do menu. Usando a técnica acima, foi fácil alinhar a parte superior das seções necessárias com a parte inferior do menu.
Graeme
0

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.

Farabi Siddique
fonte
1
Bem-vindo ao Super Usuário! Leia Como recomendar software para obter as informações mínimas necessárias e sugestões sobre como recomendar software para Superusuário. Para manter sua resposta útil, mesmo se o (s) link (s) fornecido (s) quebrar esses detalhes, deve ser editado em sua resposta.
Eu digo Reinstate Monica
@Twisty O link fornecido É o software. É um aplicativo da web. Isso parece suficiente. No entanto, Farabi, se você tem alguma afiliação à Citebite, deve divulgá-la. Caso contrário, você é bom.
Duncan X Simpson
@DuncanXSimpson Por favor, leia o meta post que eu vinculei. É necessário mais do que apenas o nome do software e um link para atender aos padrões do site.
Eu digo Reinstate Monica
@ Twisty 1. Concluído. 5. Ok, acho que você poderia defender aqui. Farabi, você deve dar uma breve instrução sobre como usá-lo. 6. Não há nada personalizado. Essa ferramenta é exatamente o que o OP precisava; nem mais nem menos.
Duncan X Simpson
1
O link está morto :(
Aryan Firouzian