Прокрутка к определенному элементу после вызова ajax

Question

Я пытаюсь прокрутить до определенного элемента на странице после вызова ajax, но по какой-то причине он не работает. Что я делаю не так?

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!"; 

?> 

Ожидаемый результат:

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

Actual Результат:

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

Answer 1

Ваша полная функция просто определяя обработчик щелчка, на самом деле не выполняет прокрутку. Просто поместите код, который выполняет прокрутку, не помещая его внутри .click().

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