我正在使用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 %>
答案 0 :(得分:1)
试着这样下滑
$('body,html').animate({'scrollTop':$("#user_"+UserId).offset().top)});
它可能对你有帮助......
用于向上滑动
上的所有消息$('.para-repeat:first',$("#user_"+UserId)).siblings().slideUp().end().slideDown();
答案 1 :(得分:1)
你可以尝试这个(它会用滚动动画)
之后
$("#user_"+UserId).append(NewMessage)
下面的代码
var container = $('body');
var scrollTo = $("#user_"+UserId);
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});