Question

我正在使用ajax请求从数据库中获取记录，并将数据附加到html中，但我想在追加数据时向下滑动html。不知道我该怎么办。

这是我正在使用的ajax方法：

$.ajax({
    url: "/get_messages",
    type: "post",
    dataType: "json",
    data: {user_id: UserId},
    success: function(response) {
        if (response.success == true && response.messages.length > 1) {
            $("#user_" + UserId).html("");
            var Length = response.messages.length;
            //alert(Length);
            $.each([response.messages], function(index, value) {
                for (var i = 0; i < Length; i++) {
                    var NewMessage = '<div class="para-repeat inner"><h4 class="h4_"' + value[i]['user_id'] + '>' + value[i]['date'] + '</h4><h4 class="h4_"' + value[i]['user_id'] + '>' + value[i]['truck'] + '</h4><h4 class="h4_"' + value[i]['user_id'] + '>' + value[i]['name'] + '</h4><p class="h4_"' + value[i]['user_id'] + '>' + value[i]['content'] + '</p><a href="#new" class="mail-icon"></a></div>';
                    $("#user_" + UserId).append(NewMessage).show('slow');
                }
            });
            //$("#user_"+UserId).slideDown("slow");
        } else {
            //$("#One").show();
            $("#One").css("display", "block").delay(2000).slideUp("slow");
        }
    }, error: function(xhr, txt) {
        console.log("Something went wrong ", xhr.status);
    }
});

我的HTML就像：

        <% @new_users.each do |message| %>
                <div class="para-repeat outer" id="user_<%= message[:user_id]%>">
                    <h4><%= message[:date] %></h4>
                    <h4><%= message[:truck] %></h4>
                    <h4><%= message[:name] %></h4>
                    <p><%= message[:content] %></p>
                    <a href="#new" class="mail-icon"></a>
                </div>
                <a id="<%= message[:user_id]%>" href="javascript:void(0);" onclick="getMessages(this.id)" class="expand">Expand All</a>
        <% end %>

Answer 1

试着这样下滑

$('body,html').animate({'scrollTop':$("#user_"+UserId).offset().top)});

它可能对你有帮助......

用于向上滑动

上的所有消息

$('.para-repeat:first',$("#user_"+UserId)).siblings().slideUp().end().slideDown();

Answer 2

你可以尝试这个（它会用滚动动画）

之后

$("#user_"+UserId).append(NewMessage)

下面的代码

var container = $('body');
var scrollTo = $("#user_"+UserId);
container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});

如何使用带有appendTo的jquery slideDown

2 个答案: