Jump to content
Luccas Gaulia

Link Ancora, como deixa-lo abrir em uma determinada posição da página

Recommended Posts

Pessoal,

 

 

Seguinte, estou utilizando uma página com ancora em "abas", porém quando clico no link dentro da ABA ele abre certinho mais puxa para o TOP da página o id correspondente, e assim prejudica o MENU que está fixo na parte de cima (pois corre a página)

 

Gostaria de saber se têm como ao clicar no âncora do link, ele direcionar para uma posição definida. Pois o que acontece é ele levar o div #id até o topo do navegador.

 

 

 

 

Share this post


Link to post
Share on other sites

Examine o código fonte da página e você vai entender como funciona a navegação in-page 

Abra a página no navegador e tecle Ctrl + U (no Windows) para abrir o código fonte.

Observe as linhas 289 até 293 (O menu de abas)
e linhas: 297, 309, 326, 343 e 354 (os destinos in-page) de cada link do menu.

 

Os links do menu apontam para os IDs de cada seção. 

Share this post


Link to post
Share on other sites
Agora, Maujor disse:

Examine o código fonte da página e você vai entender como funciona a navegação in-page 

Abra a página no navegador e tecle Ctrl + U (no Windows) para abrir o código fonte.

Observe as linhas 289 até 293 (O menu de abas)
e linhas: 297, 309, 326, 343 e 354 (os destinos in-page) de cada link do menu.

 

Os links do menu apontam para os IDs de cada seção. 

 

Sim,

Eu identifiquei isso, só não sei como ele utiliza ancora, sem ele aparecer na URL lá em cima, e muito menos arrastar o navegador ao encontro do ID...

 

como se ele anula-se a função do ancora de direcionar... apenas abrindo.

Share this post


Link to post
Share on other sites

Encontrei essa função no CSS, mas ainda não consegui aproveita-la (não sei se resolverá)

 

    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */

 

Share this post


Link to post
Share on other sites

Consegui,

 

Para ajudar os próximo, coloque isso no BODY e altere as classes para as suas...

 

<script type="text/javascript">
	$(document).ready(function() {

		$(".service-info").hide(); 
		$("ul.services-aba li:first").addClass("services-aba-active").show();
		$(".service-info:first").show('slow');
	
		$("ul.services-aba li").click(function() {
			$("ul.services-aba li").removeClass("services-aba-active");
			$(this).addClass("services-aba-active"); 
	
			$(".service-info").hide(); 
			var activeaba = $(this).find("a").attr("href");
			$(activeaba).fadeIn('slow'); 
			return false;
		});
	
	});
</script>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By thgsousa312
      uma função que recebe uma frase e uma palavra antiga e uma palavra nova. A função deve retornar uma string contendo a frase original, mas com a última ocorrência da palavra antiga substituída pela palavra nova. A entrada e saída de dados deve ser feita no programa principal. Exemplo:  
      Frase: “Quem parte e reparte fica com a maior parte”
      Palavra antiga: “parte”  Palavra nova: “parcela”
      Resultado a ser impresso no programa principal: “Quem parte e reparte fica com a maior parcela”
       
      function trocarNome(){
              
          var frase = document.getElementById("frase").value;
          var strAntiga = document.getElementById("strAntiga").value;
          var strNova = document.getElementById("strNova").value;
          //frase = frase.split(" ");
          var a = frase.lastIndexOf(strAntiga);
          var fras2 = frase.lastIndexOf(strAntiga).replace(strAntiga,strNova);
          document.getElementById("demo").innerHTML = "Certo";
      }
    • By Tuzzolino
      Boa tarde gente,
       
       
      Estou fazendo  um site  e  na hora que eu vou compartilhar ele no whatsapp  ele tá pegando o link corretamente mas ao invés de aparecer o titulo aparece somente o description  e não pega a miniatura da imagem  alguém tem algum exemplo de como  deveria ser ?
       
       
      A  imagem  é carregada assim 
       
      <amp-img height="320" width="470" id="img" src="890x610.jpg" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" i-amphtml-layout="responsive"><i-amphtml-sizer style="padding-top: 68.0851%;"></i-amphtml-sizer><img decoding="async" amp-img-id="img" src="890x610.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>  
    • By prometheusz
      Amigos bom dia, sou novo aqui
      Tenho a seguinte tabela  :
       
       
      gostaria de capturar os ids quando fosse clicado no botão pegar valor do codigo porem do jeito que fiz ele só captura o 88 nao importa qual mlinha eu clique ele so captura o numero 88
       
      codigo:

       
      <script> $(function () { $(document).on('click', '.btn-danger', function (e) { e.preventDefault; var codigo =document.getElementsByTagName('th')[5].innerHTML; alert(codigo) }); }); </script> <?php while ($dado = ibase_fetch_object($consulta_retorno)){ ?> <tr> <th data-title="ID"><?php echo ($dado->ID)?> </th> <td data-title="Nome"><?php echo utf8_encode($dado->NOME)?></td> <td data-title="DataCompra"><?php echo date("d/m/Y", strtotime($dado->DATACOMPRA))?></td> <td data-title="Email"><?php echo utf8_encode($dado->EMAIL)?></td> <td> <button class="btn-danger">Pegar Valor do Código</button></td> </tr> <?php }?>  
       
    • By gbL078
      Consegui resolver o problema, por favor podem deletar o tópico.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.