-1
I have a code that when clicking an edit button hides a form (filled) and another form appears (for editing). This code also focuses on the input it was clicked on to edit.
I would like to scroll the page so that it is visible on the user’s screen the field that is focused, because in the future this form will be very large. Follow the example of this link here, but it didn’t work in my case.
In my code below I put break line <br> just to symbolize the spacing. I would like when clicking the edit link to scroll the page to the div with 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>
pq instead of several Brs you do not create a div in the middle with the height you need?
– Vinicius De Jesus
@Viniciusdejesus os
<br>was placed only to symbolize a space on the screen where will contain severaldivand information, they will not be used in my actual code.– Wendell
Face this will only work if your screen has scrollbar, if the distance between the focused field and the end of the screen is only 100px, it will be 100px from the end of the page, and not at the top.... This behavior that you are wanting is kind of strange, especially for a page may not have scroll.... look, if you don’t have scroll, you don’t scroll http://jsfiddle.net/gd8bovpm/
– hugocsl
@hugocsl as I commented above to Vinicius De Jesus, the page will have various contents and
divwhere I put<br>. Consequently it will have scroll, and suppose it has no scroll, then the input in which the focus function will be visible on the person’s screen, consequently it will not need scroll. This behavior is necessary so that when the page has scroll the inpút in focus is visible, because the focus of the input is given automatically by clicking the edit button and not by the mouse click inside the input.– Wendell