Ir para conteúdo
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.

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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. 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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 */

 

Compartilhar este post


Link para o post
Compartilhar em outros 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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Bruno123
      Olá, estou com uma dúvida na hora  de retornar se o número é primo ou não, poderiam me ajudar por gentileza ? Obrigado !
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="javascript.js"></script> </body> </html> 'use strict' let num = prompt("Insira um número:"); let c = 0; for (i = 1; i <= num; i++) { if (num % i == 0) { c++; } } if (c == 2) { alert ("É PRIMO") } else { alert("NÃO É PRIMO") }  
    • Por ErikaLiy
      Estou começando agora com html e estou criando um site. Gostaria de saber se é possível reutilizar o código html em outras paginas. Por exemplo, todas as páginas do site terão o mesmo menu. Como faço para não precisar ficar colocando o mesmo código em todas as páginas? E caso também eu precise alterar algo, por exemplo incluir ou excluir um botão, eu consiga alterar apenas uma vez e não tenha que fazer isso de página por página.
    • Por guma.cojogra@gmail.com
      Alguém poderia me ajudar a criar um mapa mental usando css e html?
      procurei na internet mas não consegui entender e não achei nenhum tutorial ou explicação que pudesse utilizar
      quais as propriedades css que devo utilizar para criar as linhas ligando um nó a outro?
       
       
      vou postar uma imagem de exemplo de como deve ficar.

      obrigado
    • Por dayenne
      Olá desenvolvedor.
      Estou com um problema um tanto quanto bobo, porém não consigo resolver!!! Estou gerando um e-mail automático com html onde nele contém um vídeo, a pagina fica toda certinha, porém quando esse e-mail chega ao remetente,ele chega sem a parte do vídeo, onde tem o iframe e afins.
       
       
       
      Código da parte que NÃO vai para o e-mail.
       
      <div style="margin:0; padding:15px 50px 15px 50px; font-family: Arial, Helvetica, sans-serif; color:#8f8871; font-size:18px; line-height:16px; background-color:#FFF; border-top: 1px dashed #ccc" text-align:"center"> <strong>Não tenha dúvidas! Aperta o play e veja como é fácil montar o seu álbum.</strong><span style="padding-left:10px;"> </span> <br> <br> <iframe width="100%" height="315" src="https://www.youtube.com/embed/_wPfz-w2XDo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture background-color: #fff;" allowfullscreen> </iframe> </div>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.