Link para uma parte específica de uma página da web

Como faço para criar um link para uma parte de uma página da web longa em outro site que eu não controlo?

Achei que você poderia usar uma variante da #partofpage no final do meu link. Alguma sugestão?

Basta acrescentar a #seguido pelo ID da <a>tag (ou outra tag HTML, como a <section>) que você está tentando acessar. Por exemplo, se você estiver tentando criar um link para o cabeçalho neste HTML:

<p>This is some content.</p>
<h2><a id="target">Some Header</a></h2>
<p>This is some more content.</p>

Você pode usar o link <a href="http://url.to.site/index.html#target">Link</a>.

Crie um "link de salto" usando o seguinte formato:

http://www.somesite.com/somepage#anchor

Onde anchor é o id do elemento ao qual você deseja criar um link nessa página. Use as ferramentas de desenvolvimento do navegador / fonte de exibição para encontrar a id do elemento que você deseja vincular.

Se o elemento não tiver um id e você não controlar esse site, você não poderá fazer isso.

Isso só é possível se esse site tiver âncoras declaradas na página. Isso é feito dando a uma tag um nome ou atributo de id , então procure por qualquer um perto de onde você deseja vincular.

E então a sintaxe seria

<a href="page.html#anchor">text</a>

Caso a página de destino esteja no mesmo domínio (ou seja, compartilhe a mesma origem com sua página) e você não se importe em criar novas guias (1), você pode (ab) usar algum JavaScript :

<a href="javascript:void(window.open('./target.html').onload=function(){this.document.querySelector('p:nth-child(10)').scrollIntoView()})">see tenth paragraph on another page</a>

Curiosidades:

var w = window.open('some URL of the same origin');
w.onload = function(){
  // do whatever you want with `this.document`, like
  this.document.querySelecotor('footer').scrollIntoView()
}

Um exemplo prático de tal 'exploit' que você pode tentar agora pode ser:

javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('/programming/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')

Se você inserir isso na barra de localização (lembre-se de que o Chrome remove o javascript:prefixo quando colado da área de transferência) ou torne-o umhref valor de qualquer link nesta página (usando as Ferramentas do desenvolvedor) e clicar nele, você obterá outra página de perguntas SO (duplicada) rolada o rodapé e o rodapé são pintados de vermelho. (Atraso adicionado como uma solução alternativa para conteúdo carregado em Ajax empurrando o rodapé para baixo após o carregamento.)

Notas

• Testado no Chrome e Firefox atuais, geralmente deve funcionar, pois é baseado no comportamento padrão definido.
• Não pode ser ilustrado em snippet interativo aqui no SO, porque eles são isolados da página de origem.
• MDN: Window.open ()
• (1) window.open(url,'_self')parece estar interrompendo o loadevento; basicamente faz com que window.opense comporte como uma a href=""navegação normal de clique; não pesquisei mais ainda.

O primeiro fora do alvo se refere ao BlockID encontrado no código HTML ou nas ferramentas de desenvolvedor do chromes que você está tentando vincular. Cada código é diferente e você precisará fazer algumas pesquisas para encontrar o ID que está tentando fazer referência. Deve ser parecido com div class="page-container drawer-page-content" id"PageContainer"Observe que este é o formato de toda a seção referenciada, não um texto ou imagem individual. Para fazer isso, você precisaria encontrar o mesmo trecho de código, mas relacionado ao seu bloco de destino. Por exemplo: dv id="your-block-id"De qualquer forma, eu estava lendo este tópico e uma ideia me veio à mente, se você é um usuário do Shopify e deseja fazer isso, é praticamente a mesma coisa que foi dito. Mas em vez de

> http://url.to.site/index.html#target

Você colocaria

> http://storedomain.com/target

Por exemplo, estou configurando uma página de isenção de responsabilidade com links que levam à inscrição em um boletim informativo e bloqueios de compras na minha página inicial, portanto, insiro https://mystore-classifier.com/#shopify-section-1528945200235no meu hiperlink. Observe que o -classifier é para meu uso interno e não se aplica a você. Isso é apenas para que eu possa controlar minhas lojas. Se você quiser criar um link para algo diferente de sua página inicial, você deve colocar

> http://mystore-classifier.com/pagename/#BlockID

Espero que alguém tenha achado isso útil, se houver algo errado com minha explicação, por favor me avise, pois eu não sou um programador de HTML minha linguagem é C #!

O próximo recurso "Role para texto" do Chrome é exatamente o que você está procurando ...

https://github.com/bokand/ScrollToTextFragment

Você basicamente adiciona #targetText=no final do URL e o navegador rola até o texto de destino e o realça depois que a página é carregada.

Está na versão do Chrome que está rodando em minha mesa, mas atualmente deve ser habilitado manualmente. Presumivelmente, em breve será ativado por padrão nas compilações de produção do Chrome e outros navegadores seguirão, então OK para começar a adicionar aos seus links agora e começará a funcionar então.