Javascript 如何在ajax调用成功时在div之间导航

我正在开发单页应用程序，我一直在div之间导航，很简单，但我想用ajax来实现

我想做一些事情，比如当调用“success”函数时，它应该将用户视图发送/滚动到另一个div。。。。。我已经试过了 .设置动画但失败

任何形式的帮助或参考都将不胜感激

<div id="SecondInfo"></div>
        <script>
            $("#btnSubmit").click(function () {
                var FirstName = $('#FirstName').val();
                $.ajax({        
                   type: "POST",
                   url: '@Url.Action("Submit", "Home")',
                   dataType: "JSon",
                   data: { "FirstName": FirstName},
                   success: function (data) {
                       console.log(data);
                       $("#SecondInfo").animate({ scrollTop: "0px" });
                   },
                   error: console.log("it did not work"),
                });
            });
        </script>

$（“#btnsupmit”）。单击（函数（）{
var FirstName=$（'#FirstName'）.val（）；
$.ajax（{
类型：“POST”，
url:'@url.Action（“提交”、“主页”），
数据类型：“JSon”，
数据：{“FirstName”：FirstName}，
成功：功能（数据）{
控制台日志（数据）；
$（“#SecondInfo”）.animate（{scrollTop:“0px”}）；
},
错误：console.log（“它不工作”），
});
});

试试

.focus（）

$（“#btnsupmit”）。单击（函数（）{
var FirstName=$（'#FirstName'）.val（）；
$.ajax（{
类型：“POST”，
url:'@url.Action（“提交”、“主页”），
数据类型：“JSon”，
数据：{“FirstName”：FirstName}，
成功：功能（数据）{
控制台日志（数据）；
$（“#SecondInfo”）.focus（）；
},
错误：console.log（“它不工作”），
});
});

好的，让我假设您有4个

div

，每个div都有一个

input

元素，如下所示，第一个将有

活动的
类，其余的将被隐藏：

<div id="parentStep">
    <div id="div1" class="steps active">
         <input type="text" id="firstName"/>
    </div>
    <div id="div2" class="steps">
         <input type="text" id="lastName"/>
    </div>
    <div id="div3" class="steps">
         <input type="text" id="contacNum"/>
    </div>
    <div id="div4" class="steps">
         <input type="text" id="addressDetail"/>
    </div>
</div>

在
animate（）
内部使用
scrollTop（）
，设置要聚焦的元素的偏移量，这里是代码的一部分

$('html,body').animate({scrollTop: $('#second').offset().top}, 200, function() {
//next code
    });

演示JSFIDLE
谢谢你的回复，+1作为答案。焦点不适用于我…知道可能的原因是什么吗？？？很酷，它使用隐藏和显示，但我认为这不是滚动的。@viyancs它使用
hide
和
show
这就是为什么不需要滚动的原因！！希望你明白我的意思@我很感激你的努力，这个答案不适合我的看法。。。。虽然这是一个很好的解决方案。。。为SuhailMumtazAwan的问题干杯。快乐编码…）请编辑答案…以便我可以接受。。。。。如果您同意，请先用“html，正文”替换
$("#btnSubmit").click(function () {
      var activeDiv=$("#parentStep").find('.steps .active');//get the active div
      var dataToSend=activeDiv.find('input').val();//get the input value of active div
      $.ajax({        
               type: "POST",
               url: '@Url.Action("Submit", "Home")',
               dataType: "JSon",
               data: { "Data": dataToSend},
               success: function (data) {
                     activeDiv.fadeOut("slow").removeClass('active');//remove active from current step
                     activeDiv.next().fadeIn('fast').addClass('active');//get the next div visible and add active class
               },
               error: function(data){
                 console.log("it did not work"),
               }
       });
});

$('html,body').animate({scrollTop: $('#second').offset().top}, 200, function() {
//next code
    });