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 Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por jaquelss
      Os erros estão na imagem anexada. Não sei exatamente o que colocar quanto o conteúdo no menu, mas quanto ao botão segue abaixo:
       
      <div class="col-md-2 col-sm-6 col-6">
      <button class="button button-rounded btn-block nomargin"
      style="margin-top: 29px !important;"><a href="http://localhost/xavier/#/imovel"></style>Encontrar</a></button>
      </div>
       
      Tenho certeza que é uma bobagem minha, mas perdi a tarde tentando resolver.
      Ainda sou estudante, não tenho conhecimento total quanto a isso (apesar de que acho que ninguém tem né kk).
      Enfim,
      Agradeço desde já.

    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

    • Por bessa238
      Bom dia galera, estou tendo um problema com meu código, eu trago os dados do banco mas tenho 2 SELECT dependentes, um com estado e a cidade, segue o código
                  $.when(                 $('#estado').val(data.estado), //o valor da option no select estado ( já está preenchido com os values desde o carregamento da página ) é setado.                 $('#estado').change()) //o método change() é chamado para que o carregamento das cidades no select 2 ( cidades ) é feito.             .then(function() {                 $('#cidade').val(data.cidade); //deveria setar a cidade vinda do banco como a option no select.             }); funcional apenas até a parte do $('#estado').change(), a cidade ( vinda do banco ) é até setada por um breve momento, questão de 0,25 segundos, depois o valor que aparece na cidade é alterado e setado como a primeira option dentre todas opções do select. Alguém já passou por tal problema ? estou a um tempo atrás de solução e não consigo obter nenhuma resposa, porém sei que é possível fazer como isso é apenas um formulário de cadastro para edição, muitos outros sistemas e sites usam este recurso. Desde já, obrigado a todos !
×

Informação importante

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