ajax提交后，滚动到表单顶部[重复]答案

【问题标题】：After ajax submit, scroll to top of form [duplicate]ajax提交后，滚动到表单顶部[重复]
【发布时间】：2012-12-13 16:24:43
【问题描述】：

可能重复：
Scroll to top after Ajax content load

我有一个 ajax 表单，提交时会显示错误或成功消息，理想情况下，我想将浏览器滚动到表单顶部，以便用户可以看到这些消息，但是当我实现它时，它似乎没有正常工作，我不知道如何修复它：-/它要么滚动不够高，要么刷新？ :(我很茫然，如果你能指导我，那就太好了:)

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

【问题讨论】：

哦，是的，类似，但是我不想滚动到页面顶部，我只想滚动到表单顶部...
也试试这个问题：stackoverflow.com/questions/4884839/…，如果你不能让它与'form'一起工作，试试'form:first-child'
在您的帖子中成功放置动画是否有帮助？所以这个动画是在你修改表单内容（添加错误消息，...）之后而不是同时发生的，这可能解释了意外的行为。
或者ajax post作为动画回调。
不幸的是，我将滚动顶部动画放置在哪里似乎并不重要，它没有转到我想要的位置。如果我将它放在成功中，它会向上滚动一个表单字段，覆盖名称字段和显示的任何消息:(

标签： jquery ajax jquery-animate

【解决方案1】：

其实我会通过两种方式来做：

第一：

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

在这里我创建了一个函数 submitForm() 并单击我正在提交的输入类型按钮。

或者使用提交按钮的更好方法：

第二：（我喜欢这种方式）

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

【讨论】：