如何在Ajax调用的div之间导航在成功

Question

我在单页应用程序的工作，我一直的div之间导航，它的简单，但我想用Ajax做....

我想做这样的事情。当“成功”函数调用，那么它应该发送/滚动用户视图另一DIV .....我已经尝试过 .animate但未能....

任何形式的帮助或参考将被赞赏

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

Answer 1

使用scrollTop()内animate()并设置从元件空间偏移你想做的重点，这里的部分代码。

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

演示的jsfiddle Scroll animate

Answer 2

尝试.focus()

<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").focus(); 
       }, 
       error: console.log("it did not work"), 
      }); 
     }); 
     </script> 

Answer 3

好让我假设你有4 divs每个单input要素如下，第一个将有active类和其余会被隐藏：

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

现在在ajax上success只是试图找到div与有效类和hide它和showdiv这是它旁边如下：

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