Question

我有一个搜索表单，当点击搜索按钮时，它会通过ajax请求获取数据并附加到div中。现在，当项目返回时，我需要自动滚动到搜索的第一个结果。我该怎么做？

设置scrolltop的脚本：

$("#search").on("click",function(){
    // Handler for .ready() called.
    $('html, body').animate({
        scrollTop: $('#view2').offset().top//instead of #View2, how do I make the page scrolltop to the first item appended in the for loop below?
    }, 'slow');
});

点击搜索按钮按钮后，结果将被ajax提取并附加到div中，如下所示：

$("#searchform").on("submit", function () {
    //$(this).find(':submit').attr('disabled','disabled');
    var data = {
        "action": "test"
    };        

    $.ajax({
        type: "POST",
        dataType: "json",
        url: "search/ajax2.php",
        data: data,  
        success: function (data) {
            $(".the-inner-return").append("<a href='search2.php?TID="+ tid +"'>")//need to set the scrolltop here
        }
    });
});

Answer 1

你可以这样做。

$("#search").on("click",function() {
    $('html, body').animate({
        scrollTop: $("#elementIdToWhichScroll").offset().top
    }, 'slow');
});

elementIdToWhichScroll 是您的第一个元素ID。

编辑代码 -

success: function (data) {
         $(".the-inner-return").append("<a href='search2.php?TID="+ tid +"'>");

             $('html, body').animate({
            scrollTop: $("#elementIdToWhichScroll").offset().top
        }, 'slow');

 }

Answer 2

使用以下jQuery代码

$( document ).ajaxComplete(function() {

  $('html, body').animate({
    scrollTop: $('#view2').offset().top//instead of #View2, how do I make the page scrolltop to the first item appended in the for loop below?
}, 'slow');

});

Answer 3

$("html, body").animate({ scrollTop: 0 }, "slow");

在使用div id或class获取结果数据后使用此代码。

Answer 4

您需要将动画移动到ajax成功回调中。然后，您可以使用O(log #P)伪来获取该元素中的最后一个锚点（因为您已将其附加到末尾，A需要O(n)）。

http://jsfiddle.net/onj1yxdq/

:last

如何将焦点/滚动顶部设置为循环中的第一项？

4 个答案: