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 alsimmonsjr
      Olá à todos, gostaria de saber se alguém pode me ajudar a fazer root no meu celular que já coloquei o nome no tópico, se alguém pode me ajudar eu agradeço, desde já agradecido, muito obrigado e tchau.
    • By LRDSILVA3
      Pessoal Boa Tarde ,Tudo certo?
      Estou com um projeto para aprendizagem (já que só tenho conhecimentos de css e html) e upgrade da firma onde trabalho e não estou conseguindo salvar os valores do formulário no banco de dados,a conexão é feita porem salva todos os valores como null.
      <?php
      $servername = "192.168.1.109";
      $database = "cadastrokm";
      $username = "teste";
      $password = "123456";
      // Create connection
      $conn = mysqli_connect($servername, $username, $password, $database);
      // Check connection
      if (!$conn) {
            die("Connection failed: " . mysqli_connect_error());
      }
       
      echo "Connected successfully";
      $funcionarioKm = isset( $_POST['funcionarioKm']); 
          $veiculoKm = isset($_POST['veiculoKm']);
          $kmInicial = isset($_POST['kmInicial']);
          $kmFinal = isset($_POST['kmFinal']);
       
      $sql = "INSERT INTO km (funcionarioKm,veiculoKm,kmInicial,kmFinal) 
          VALUES ('$funcionarioKm','$veiculoKm','$kmInicial',
          '$kmFinal')";
      if (mysqli_query($conn, $sql)) {
            echo "New record created successfully";
      } else {
            echo "Error: " . $sql . "<br>" . mysqli_error($conn);
      }
      mysqli_close($conn);
      ?>
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

      </head>
      <body>
        
          <div class=container>
      <section>
          <!-- Página de Cadastro de KM -->
          <h1>Cadastro de Km</h1>
          <hr><br><br>
          <form method="post" action="conexao.php">
          <p class="font-weight-bold">Favor Selecione seu Nome:</p>
                <select id="funcionarioKm"  name="funcionarioKm"required autofocus>
                    <option>Motorista</option>
                    <option>Almir</option>
                           <option>Maykon</option>
                                      <option>Jorge</option>    
                                  </select>
      </br></br>
                <p class="font-weight-bold">Favor Selecione o Veiculo:</p>
                <select id="veiculoKm" value="veiculoKm " name="veiculoKm"required>
                    <option>Veiculo</option>
                    <option>L200</option>
                           <option>Strada 01</option>
                                      <option>Strada 02</option>    
                                      <option>Caminhão 01</option>    
                                  </select> 
       </br></br>
                 <label for="litros"><p class="font-weight-bold">Informe a Quilometragem Inicial:</p></label>
              <input type="number" id="kmInicial" name="kmInicial" required/>
      </br></br>
              <label for="litros"><p class="font-weight-bold">Informe a Quilometragem Final:</p></label>
              <input type="number" id="kmFinal" name="kmFinal" required />
      </br></br>
              <input type="submit" value="Salvar"    class="btn btn-primary btn-md">
              <input type="reset" value="Limpar"class="btn btn-primary btn-md" >
              <br><br>
      </form>
      </section>
      </div>
      </body>
      </html>
       

       
       
    • By proflupin
      criei uma página que busca alguns dados no BD e retornar em forma de collapse. Como existe um WHILE executando o collapse, ele sempre o executa com o mesmo ID, ou seja, se eu tiver 20 collapse, todos vão ser abertos ao clicar no primeiro.
      A dúvida é, como eu posso criar um novo ID para o collapse a cada loop do While?
      Código:
       
      <?php while($result_inners = mysqli_fetch_object($result_inner)){ ?> <div class="card-footer "> <a class="text-muted" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapseExample"> <i class="fas fa-comment-alt"></i> <?php if(!empty($result_inners->nome_completo)) echo $result_inners->nome_completo . " respondeu..."; else echo "Aguardando resposta do técnico." ?> </a> <div class="collapse " id="collapse1"> <div class="bg-white mt-2 p-2"> <?php echo nl2br($result_inners->mensagem) ?> </div> <span style="color: #6c757d; float: right;"><?php echo date('d/m/Y H:i', strtotime($result_inners->data_hora)) ?></span> </div> </div> <?php } ?>  
    • By Lucas Trindade
      Boa noite galera!
       
      Estou desenvolvendo um site em Bootstrap e surgiu uma dúvida afinal nunca desenvolvi um layout desta forma.
       
      Na foto anexada os 3 cards estão deslocados para baixo do container e isto faz com que a seção seguinte dos cards fique em cima deles por conta deste deslocamento.
       
      Não sei se fui bem claro mas, como eu arrumaria isso? 
       
      Preciso desenvolver este site para enviar para uma empresa. Alguém poderia me ajudar? Se for necessário envio o arquivo com o site inteiro.Obrigado
×

Important Information

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