4
respostas

Como criar uma URL âncora

Oie pessoal, estou com uma duvida aqui e espero que vocês possam me ajudar.

Eu tenho uma lista de 6 perguntas dentro da minha pagina e gostaria que cada pergunta tivesse sua URL própria para que quando eu compartilhar essa URL especifica o link abra direto na pergunta. Tentei procurar na internet algo parecido mas não encontrei

exemplo de como que eu gostaria que a url ficasse e então levasse direto para a pergunta 3: www.dominio.com.br/pagina-de-perguntas/#pergunta-3

<ul>
    <li><strong>1 - pergunta?</strong>
    </li>
    <li><strong>2 - pregunta?</strong>
    </li>
    <li><strong>3 - pergunta?</strong>
    </li>
    <li><strong>4 - pergunta?</strong>
    </li>
    <li><strong>5 pergunta?</strong>    
    </li>
</ul>
4 respostas

Deixe-me ver se entendi, quer que apareça apenas esta pergunta no momento?

Veja este exemplo, seria isso?

https://www.w3schools.com/w3css/w3css_modal.asp

Oi Marcio vou te mandar um link de exemplo.

Nessa pagina conforme rola o scroll para baixo a url muda (adiciona o titulo da pergunta) https://duvidasgasolina.hotsitespetrobras.com.br/, e também se eu pegar uma url que tenha o titulo da pergunta e compartilhar, quando eu abrir esse link ele vai ir direto para a pergunta específica.

https://duvidasgasolina.hotsitespetrobras.com.br/ha-monopolio-no-setor-de-combustiveis/

seria esse tipo de ancora que eu gostaria de saber como posso fazer

Marilia

Resumidamente, este efeito que quer fazer utiliza JS. Desta forma ele muda a url sem fazer refresh na página. Abaixo deixei um artigo que encontrei com uma linguagem bem simples.

http://www.igorescobar.com/blog/2012/03/02/javascript-aviso-de-dados-nao-salvos/

Também achei bem interessante, confesso que não havia parado para prestar atenção nesta funcionalidade.

Espero ter ajudado

Abraço.

Marcio pelo que eu entendi desse artigo ele se trata de um evento de confirmação do usuário, não é bem isso que eu procuro. O que eu preciso é que conforme eu role o scroll a url seja alterada, adicionando no final dela o ID do bloco de texto onde a pagina se encontra. Se olhar no link que eu enviei ele faz isso, vou deixar aqui também um script q eu montei que esta alterando a url MAAS infelizmente ainda não esta pegando a ID do bloco

<script> 
window.onscroll = function() {changeUrl()};

  function changeUrl(id) {
    const url = new URL(window.location);
    const newURL = url.pathname + '?q=' + id
    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
          debugger;
        window.history.pushState({}, '', newURL)
      } else {
        window.history.pushState({}, '', null)
      }
}

function setCurrentTab() {
    const params = new URLSearchParams(window.location.search);
    const currentTab = params.get("q");
       jQuery("#" + currentTab).scroll();
}
</script>
<html>
<ul>
    <li height="228" id="consumo-do-gas-de-cozinha-diminuiu" onscroll="changeUrl('consumo-do-gas-de-cozinha-diminuiu')" width="304"><strong>1 - O consumo de gas de cozinha diminuiu em 2020?</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt magna vel odio scelerisque placerat. Sed non sapien vulputate, varius arcu vitae, viverra enim. Sed facilisis condimentum porta. Donec mollis nisi sagittis vestibulum gravida. Nunc quis neque nec lacus ornare ullamcorper. Etiam vitae venenatis justo. </p>
    </li><li height="228" id="consumo-do-gas-de-cozinha-diminuiu" onscroll="changeUrl('consumo-do-gas-de-cozinha-diminuiu')" width="304"><strong>2 - O consumo de gas de cozinha diminuiu em 2020?</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt magna vel odio scelerisque placerat. Sed non sapien vulputate, varius arcu vitae, viverra enim. Sed facilisis condimentum porta. Donec mollis nisi sagittis vestibulum gravida. Nunc quis neque nec lacus ornare ullamcorper. Etiam vitae venenatis justo. </p>
    </li><li height="228" id="consumo-do-gas-de-cozinha-diminuiu" onscroll="changeUrl('consumo-do-gas-de-cozinha-diminuiu')" width="304"><strong>3 - O consumo de gas de cozinha diminuiu em 2020?</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt magna vel odio scelerisque placerat. Sed non sapien vulputate, varius arcu vitae, viverra enim. Sed facilisis condimentum porta. Donec mollis nisi sagittis vestibulum gravida. Nunc quis neque nec lacus ornare ullamcorper. Etiam vitae venenatis justo. </p>
    </li>
</ul>
</html>