-1

Tenho um código que ao clicar em um botão de edição esconde um formulario (preenchido) e aparece outro formulário (para edição). Este código também dá foco no input em que foi clicado para editar.

Eu gostaria de dar um scroll na página para que fique visível na tela do usuáiro o campo que está com foco, pois no futuro este formulário será bem grande. Segue o exemplo deste link aqui, mas não funcionou no meu caso.

No meu código abaixo eu coloquei quebra de linha <br> só para simbolizar o espaçamento. Eu gostaria que ao clicar no link de editar rolasse a página até a div com id info1-editar.

$( document ).ready(function() {
$("#editarDados").hide();
})

function darfocus(el){
  var id = '';
  var $doc = $('html, body');
  id = (el.id);
  id = id.replace("focus-", "");
  $("#editarDados").show("slow");
  $("#valoresDados").hide("slow");
  $('#' + id).focus();
  $doc.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">



    <div class="row" id="valoresDados">
        <div class="col-12 col-sm-12 col-md-12 mt-2 mb-2">
          <a href="#info1-editar" onclick="darfocus(this)" id="focus-senha" class="editar-dados"><i class="fas fa-pen-square"></i></a>
          <strong> Senha:</strong> *******</div>
      <div class="col-12 col-sm-12 col-md-3 float-left mt-2 mb-2">
        <a href="#info1-editar" onclick="darfocus(this)" id="focus-telefone" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Telefone:</strong> (62) 3232-0000
      </div>
      <div class="col-12 col-sm-12 col-md-4 float-left mt-2 mb-2">
        <a href="#info1-editar" onclick="darfocus(this)" id="focus-telefone2" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Celular:</strong> (62) 98199-3558
      </div>
      <div class="col-12 col-sm-12 col-md-5 float-left mt-2 mb-2">
        <a href="#info1-editar" onclick="darfocus(this)" id="focus-cep" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Cep:</strong> 00000-000
      </div>
    </div>
    
    <div class="row" id="editarDados">
      
      <div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>

      <div class="col-12 col-sm-12 col-md-12 float-left">Teste</div>
       
<div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>

      <div class="col-12 col-sm-12 col-md-12 float-left">Teste2</div>
      <div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>
      
      
        <div id="info1-editar"></div>
        
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t55" for="senha"><strong>Senha* </strong></label>
          <input type="password" class="t55" name="senha" id="senha" required value="*******">
        </div>
        
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t85" for="telefone"><strong>Telefone*: </strong></label>
          <input type="text" class="t85" name="telefone" id="telefone" required value="(62) 0000-0000">
        </div>
        
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t85" for="telefone2"><strong>Celular: </strong></label>
          <input type="text" class="t85" name="telefone2" id="telefone2" required value="(62) 90000-0000">
        </div>
         
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t55" for="cep"><strong>Cep*: </strong></label>
          <input type="text" class="t55" name="cep" id="cep" required value="00000-000">
        </div>
      
      <div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>

      <div class="col-12 col-sm-12 col-md-12 float-left">Teste</div>

       <div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>

      <div class="col-12 col-sm-12 col-md-12 float-left">Teste2</div>
      
       <div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>
      
    </div>

4
  • pq ao invés de vários Brs vc não cria uma div no meio com a altura que vc precisa? 9/05/2019 às 15:51
  • @ViniciusDeJesus os <br> foi colocado só para simbolizar um espaço na tela onde conterão diversas div e informações, eles não serão usados no meu código real.
    – Wendell
    9/05/2019 às 16:33
  • cara isso só vai funcionar se sua tela tiver barra de rolagem, se a distancia entre o campo focado e o final da tela for de apenas 100px, ele vai ficar a 100px do final da página, e não no topo.... Esse comportamento que vc está querendo é meio estranho, principalmente para uma página pode não ter scroll.... olha ai, se não tem scroll, não faz scroll jsfiddle.net/gd8bovpm
    – hugocsl
    9/05/2019 às 17:19
  • @hugocsl conforme comentei acima para Vinicius De Jesus, a página terá diversos conteúdos e div no local onde coloquei <br>. Consequentemente ela terá scroll, e suponha que ela não tenha scroll, então o input em que a função dá foco ficará visível na tela da pessoa, consequentemente não será preciso o scroll. Esse comportamento é necessário para que quando a página tenha scroll o inpút em foco fique visível, pois o foco do input é dado automaticamente ao clicar no botão de editar e não pelo clique do mouse dentro do input.
    – Wendell
    9/05/2019 às 18:08

1 Resposta 1

0

Utilizando a classe '.scroll'.. Caso queira ver uma demo tem o repositório: https://github.com/lauragrassig/scroll-suave

jQuery(document).ready(function($) { 
$(".scroll").click(function(event){        
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 400);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">



    <div class="row" id="valoresDados">
        <div class="col-12 col-sm-12 col-md-12 mt-2 mb-2">
          <a href="#info1-editar" onclick="darfocus(this)" id="focus-senha" class="editar-dados scroll"><i class="fas fa-pen-square"></i></a>
          <strong> Senha:</strong> *******</div>
      <div class="col-12 col-sm-12 col-md-3 float-left mt-2 mb-2">
        <a href="#info1-editar" onclick="darfocus(this)" id="focus-telefone" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Telefone:</strong> (62) 3232-0000
      </div>
      <div class="col-12 col-sm-12 col-md-4 float-left mt-2 mb-2">
        <a href="#info1-editar" onclick="darfocus(this)" id="focus-telefone2" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Celular:</strong> (62) 98199-3558
      </div>
      <div class="col-12 col-sm-12 col-md-5 float-left mt-2 mb-2">
        <a href="#info1-editar" onclick="darfocus(this)" id="focus-cep" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Cep:</strong> 00000-000
      </div>
    </div>
    
    <div class="row" id="editarDados">
      
       <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <div class="col-12 col-sm-12 col-md-12 float-left">Teste</div>
       <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <div class="col-12 col-sm-12 col-md-12 float-left">Teste2</div>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      
      
        <div id="info1-editar"></div>
        
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t55" for="senha"><strong>Senha* </strong></label>
          <input type="password" class="t55" name="senha" id="senha" required value="*******">
        </div>
        
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t85" for="telefone"><strong>Telefone*: </strong></label>
          <input type="text" class="t85" name="telefone" id="telefone" required value="(62) 0000-0000">
        </div>
        
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t85" for="telefone2"><strong>Celular: </strong></label>
          <input type="text" class="t85" name="telefone2" id="telefone2" required value="(62) 90000-0000">
        </div>
         
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t55" for="cep"><strong>Cep*: </strong></label>
          <input type="text" class="t55" name="cep" id="cep" required value="00000-000">
        </div>
      
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <div class="col-12 col-sm-12 col-md-12 float-left">Teste</div>
       <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <div class="col-12 col-sm-12 col-md-12 float-left">Teste2</div>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      
    </div>

1
  • eu vi diversos códigos em que o scroll suave funciona, porém não consegui adaptá-lo nesta minha função que esconde um formulário e aparece outro, o scroll deve responder ao segundo formulário que aparece. O link que chama a função de esconder o primeiro formulário e aparece o segundo tem a ancora #info1-editar e dentro do segundo formulário tem a div declarada: <div id="info1-editar"></div> mas não funciona a função scroll
    – Wendell
    9/05/2019 às 18:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .