javascript - Scrolling to a certain element after ajax call - Stack Overflow

admin管理员组

文章数量:1303335

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=".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)
        plete:function(data) {
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#divTwo").offset().top
                }, 2000);   
        } //end of plete: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)

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./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)
        plete:function(data) {
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#divTwo").offset().top
                }, 2000);   
        } //end of plete: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)

• javascript
• php
• jquery
• ajax

Share Improve this question Follow edited Dec 29, 2015 at 2:58 Barmar 783k5656 gold badges546546 silver badges660660 bronze badges asked Dec 29, 2015 at 2:33 jessicajessica 1,68722 gold badges2020 silver badges3737 bronze badges 15

• @barmar I need to execute this AFTER an ajax call. – jessica Commented Dec 29, 2015 at 2:39
• Why do you think the code in that question won't work after an AJAX call? – Barmar Commented Dec 29, 2015 at 2: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 Commented Dec 29, 2015 at 2:43
• Just give your elements some actual height. Instead of height:100% use height:400px for example. – Larry Lane Commented Dec 29, 2015 at 2:45
• @jessica Don't reask. If it doesn't work, update the question and request that it be reopened. – Barmar Commented Dec 29, 2015 at 2:48

 |  Show 10 more ments

1 Answer 1

Sorted by: Reset to default 10

Your plete 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().

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

本文标签： javascriptScrolling to a certain element after ajax callStack Overflow