2012-12-13 6 views
2

가능한 중복 :
Scroll to top after Ajax content load후, 폼의 상단으로 스크롤

나는 쇼 오류 또는 성공 메시지를 제출 아약스 양식이 이상적으로 내가하고 싶습니다 사용자가 이러한 메시지를 볼 수 있도록 브라우저를 스크롤하여 양식을 맨 위로 스크롤하십시오. 그러나 이것을 구현할 때 제대로 작동하지 않는 것으로 보입니다. 어떻게 고칠 것인가를 모릅니다. -/높은 스크롤하지 않습니다. 충분하거나 새로 고칩니다. :(나는 당신이 나를 인도 할 수 있다면 그것은 좋은 것, 손실에 있어요 :)

$('#submit').bind('click', function(){ 
    $('body, html').animate({scrollTop:$('form').offset().top}, 'slow', 'easeInCubic'); 
    $.ajax({    
     url:$(this).attr('action'), 
     type:'POST',    
     data:$('form').serialize(), 
     dataType:'json', 
     success:function(respond) { 
     if(respond.result == 'false') { 
      var error_msg = '<h3>Please correct the following errors:</h3><ul>'+respond.errors+'</ul>'; 
      $('.error_msg').html(error_msg);    
     } else { 
      var success_msg = '<h3>Success!</h3>'; 
      $('.error_msg').empty();  
      $('.success_msg').html(success_msg); 
      $('form').find("input[type=text], textarea").val("");       
      setTimeout(function() { 
       $('.success_msg').slideUp();        
      }, 5000); 
     }  
     } 
    });      
    return false;  
}); 

HTML :

FIRST :

<form method="post" action="form.php"> 
    <div class="error_msg"></div> 
    <div class="success_msg"></div> 
    <label for="name">Name?</label> 
    <input type="text" value="" name="name" /> 
    <label for="email">Email?</label> 
    <input type="text" value="" name="email" /> 
    <input id="submit" type="submit" value="Submit" name="submit" /> 
</form> 
+0

예 오, 그것과 유사하다, 그러나 나는의 상단으로 스크롤하고 싶지 않아 페이지, 그냥 양식의 맨 위로 스크롤하고 싶습니다 ... –

+0

당신의 HTML을 추가 할 수 있습니까? –

+0

이 질문을 시도해보십시오. http://stackoverflow.com/questions/4884839/how-do-i-get-a-element-to-scroll-into-view-using-jquery, 얻을 수 없다면 'form'으로 작업하기 'form : first-child'로 시도하십시오 – BuddhiP

답변

3

사실 나는 두 가지 방법으로 그것을 할 것 :

여기에서 submitForm() 함수를 만들고 입력 유형 버튼을 클릭하여 제출합니다.

또는 제출 버튼이있는 더 좋은 방법 :

SECOND : (I이 방법을 LIKE)

$(function(){ 
    $('form').submit(function(e){ 
    e.preventDefault(); 
     $.ajax({ 
     url:"a.php", 
     type:"post", 
     success:function(data){ 
      alert(data); 
     }, 
     complete:function(){ 
      $('body, html').animate({scrollTop:$('form').offset().top}, 'slow'); 
     } 
    }); 
    }); 
}); 
관련 문제