After ajax submit, scroll to top of form

Question

Possible Duplicate:
Scroll to top after Ajax content load

I have an ajax form which when submitted shows error or success messages, ideally I'd like to scroll the browser to the top of the form so the user can see these messages, however when I implement this it doesn't seem to work properly and I've no idea how to fix it :-/ it either doesn't scroll high enough or it refreshes? :( I'm at a loss, if you could guide me that would be great :)

$('#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:

<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>

Ooh yes, it is similar, however I don't want to scroll to the top of the page, I just want to scroll to the top of the form... — green_arrow, Dec 13 '12 at 16:29
Try this question as well: http://stackoverflow.com/questions/4884839/how-do-i-get-a-element-to-scroll-into-view-using-jquery , if you can't get it to work with 'form' try with the 'form:first-child' — BuddhiP, Dec 13 '12 at 16:34
Does putting the animation in success of your post help? So this animation happens after you modify the form contents (adding error msg, ...) instead of at the same time, which may explain the unexpected behaviour. — Nathan Q, Dec 13 '12 at 16:36
Unfortunately it doesn't seem to matter where I place the scroll top animation, it doesn't go to where I'd like. If I place it in the success it scrolls up one form field, covering the name field and any messages which are shown :( — green_arrow, Dec 13 '12 at 16:53

Jai · Answer 1 · 2012-12-13T18:11:21.630

Actually i would do it in two ways:

FIRST:

         $(function(){
            function submitForm(){
                $.ajax({
                    url:"a.php",
                    type:"post",
                    success:function(data){
                        alert(data);
                    },
                    complete:function(){
                        $('body, html').animate({scrollTop:$('form').offset().top}, 'slow');
                    }
                });
            }
            $('#submit').click(function(){
                submitForm();
            });
        });

Here i have created a function submitForm() and click of the input type button i am submitting it.

or a better way with a submit button:

SECOND: (I LIKE THIS WAY)

$(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');
        }
     });
  });
});

After ajax submit, scroll to top of form

1 Answers1