Scrolling to a certain element after ajax call

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)

Why do you think the code in that question won't work after an AJAX call? — Barmar, Dec 29 '15 at 02:41
@barmar Ok. I will re-ask this question, after I try to use the code in the question, and it doesn't work again. — jessica, Dec 29 '15 at 02:43
Just give your elements some actual height. Instead of height:100% use height:400px for example. — Larry Lane, Dec 29 '15 at 02:45
@jessica Don't reask. If it doesn't work, update the question and request that it be reopened. — Barmar, Dec 29 '15 at 02:48
@Barmar That answer is for BEFORE ajax call, I need answer for AFTER ajax call. — jessica, Dec 29 '15 at 02:50
That answer doesn't have anything to do with AJAX at all. It's just how to scroll to an element correctly. You can use it before or after an AJAX call and it will work the same. — Barmar, Dec 29 '15 at 02:51
@Barmar Should I re-ask this question then? Since, I edited it, and it doesn't work ,and you're still telling me that it's working? — jessica, Dec 29 '15 at 02:52
You need to put the code into the `complete:` function, in place of `document.location.hash = "divTwo"` — Barmar, Dec 29 '15 at 02:54
You're not scrolling, you're just defining a handler that scrolls when you click on another element. Do you read the code that you're copying, and try to understand the parts of it? — Barmar, Dec 29 '15 at 02:59
You use jQuery and you don't understand what `$("#click").click()` does? That's one of the most basic features. — Barmar, Dec 29 '15 at 03:04

score 9 · Accepted Answer · answered Dec 29 '15 at 03:00

9

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

answered Dec 29 '15 at 03:00

Barmar

596,455
48
393
495

Thanks you very much for this. Works beautifully! – mrwpress Sep 06 '20 at 21:52

Scrolling to a certain element after ajax call

1 Answers1