ajax调用后滚动到某个元素

Question

I'm trying to scroll to a certain element on the page after an ajax call, but it's not working for some reason. What am I doing wrong?

test.php

<style>
#divOne {
border: 1px solid red;
height: 100%;
width: 100%;
}
#divTwo {
border: 1px solid blue;
height: 100%;
width: 100%;
}
</style>

<input id = 'click' type = 'submit' value = 'Click' onclick = "ajaxCall('testx.php')">
<div id = 'divOne'></div>
<div id = 'divTwo'></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type = "text/javascript"> 

function ajaxCall(action) {

    $.ajax({
        type: "POST",
        url: action,
        error: function(xhr,status,error){alert(error);},
        success:function(data) {
            document.getElementById('divTwo').innerHTML = data;        
        }, //end of success:function(data)
        complete:function(data) {
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#divTwo").offset().top
                }, 2000);   
        } //end of complete:function(data)
    }); //end of $.ajax({

} //end of function ajaxCall()

</script>

testx.php

<?php

echo "Hello World!";

?>

Expected Result:

Hello World! 
(The page to scroll to #divTwo)

Actual Result:

Hello World! 
(The page DID NOT scroll to #divTwo)

Answer 1

Your complete function is just defining a click handler, not actually performing the scroll. Just put the code that does the scroll, without putting it inside .click().

    complete:function(data) {
        $('html, body').animate({
            scrollTop: $("#divTwo").offset().top
        }, 2000);   
    }