Jak przewinąć do okna modalnego w javascript

Question

Moim wymaganiem jest to, że muszę pokazać okno modalne jako formularz do wypełnienia przez użytkownika. Ale wysokość tego modala nie powinna przekraczać rozmiaru okna.

Więc jeśli wpisy w formularzu są zbyt duże, modal staje się przewijany. Problem polega na tym, że podczas sprawdzania poprawności wpisów w formularzu komunikat o błędzie jest wyświetlany u góry modalu nad pierwszym wpisem. Jeśli użytkownik jest na końcu właściwości, nie będzie wiedział, że wystąpił błąd weryfikacji, chyba że modał przewinął się na szczyt zdarzenia błędu.

Próbowałem:

$(window).scrollTop(); 
// and 
$('#modalId').scrollTop(); 

jest to kod modalne:

<div class="modal hide" id="groupModal" tabindex="-1" role="dialog" aria-hidden="true" > 
    <div class="modal-header"> 
    </div> 
    <div class="modal-body" style="max-height: 300px;"> 
     <div class="grpForm"> 
      <div class="alert alert-error hide"> 

       <span class="errMsg"></span> 
      </div> 
      <div class="alert alert-success hide"> 

       <span class="successMsg"></span> 
      </div> 
      <form class = "formFieldHolder" id="groupInfoForm"></form> 
      </div> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn cancelFormBtn" data-dismiss="modal" aria-hidden="true" msgkey="common.cancel.label"></button> 
     <button class="btn btn-primary submitGroupFormBtn" type="submit" msgkey="common.submit.label"></button>  
    </div> 
</div> 

Answer 1

$('#modalId').scrollTop(0);

scrollTop() zwraca tylko wartość; scrollTop(0) ustawia wartość na 0 (całą drogę do góry)

Answer 2

aby przewinąć stronę do modalnym, wybierz html, body i przejdź do offsetu górze modalnym

$("html, body").scrollTop($("#modalId").offset().top); 

Jeśli chcesz, aby przewinąć modalne div na górę użytku

$("#modalId").scrollTop(0); 

Example on jsFiddle

można połączyć zarówno przewijać stronę i modal do VI w razie potrzeby dla użytkownika.

Referencje

• jQuery scrollTop
• jQuery offset

Answer 3

<script type="text/javascript"> 
      $(document).ready(function(){ 
      $('.scroll_top').hide(); 
      $(window).scroll(function(){ 
       if ($(this).scrollTop() > 100) { 
        $('.scroll_top').fadeIn(); 
       } else { 
        $('.scroll_top').fadeOut(); 
       } 
      }); 

      $('.scroll_top').click(function(){ 
       $("html, body").animate({ scrollTop: 0 }, 500); 
       return false; 
      }); 

     }); 
</script> 

Answer 4

Musisz to "jquery-1.7.1.min.js" pliku na stronie. http://code.jquery.com/jquery-1.7.1.min.js

Answer 5

let element = document.getElementById('your_div_id'); 

element.scrollIntoView(true); 

Answer 6

Aby uniknąć szorstki ruch do góry wolałbym użyć (animowany ruch):

$('#modalId').animate({ 
     scrollTop : 0 
    }, 'slow');