聊天web应用jquery scrollTop问题
Chat web application jquery scrollTop issue
我开发了一个聊天web应用程序。面对关于jquery scrollTop的问题。请看下面的代码片段:
what I want…在页面加载事件中,所有聊天对话都滚动到底部并显示最后一条消息。当点击顶部箭头按钮时,它将缓慢滚动,反之亦然。
我得到的是……在页面加载时,所有对话都滚动到底部。然后,当按下顶部或底部按钮时,它会一直到顶部(这是主要的prb)。之后就可以正常工作了。
请给我一个适当的建议如何克服它。提前谢谢。var scrolled = 0;
var scrolledspreed = 100;
var container = jQuery('#sc-chat-listg');
var row = jQuery('div.sc-single-gl', container).last();
if (row.length) {
var r_position = row.position();
var c_scrollTop = container.scrollTop() + r_position.top;
jQuery('#sc-chat-listg').animate({scrollTop: c_scrollTop}, 1000);
}
$("#sg-top").on("click" ,function(e){
e.preventDefault();
scrolled=scrolled-scrolledspreed;
$("#sc-chat-listg").animate({
scrollTop: scrolled
});
$('.sc-inbtn').append(scrolled);
});
$("#sg-bottom").on("click" ,function(e){
e.preventDefault();
scrolled=scrolled+scrolledspreed;
$("#sc-chat-listg").animate({
scrollTop: scrolled
});
$('.sc-inbtn').append(scrolled);
});
ul.sc-chat-list {
list-style: none outside none;
margin: 0;
padding: 0;
overflow: scroll;
height: 200px;
}
ul.sc-chat-list > li {
background: none repeat scroll 0 0 #f0f0f0;
display: block;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
}
div.sc-single-chat {
border: 1px solid #c7d1c7;
padding: 11px 14px;
overflow: hidden;
}
div.sc-single-gl {
cursor: pointer;
}
div.sc-avatar {
float: left;
width: 65px;
}
div.sc-avatar > img {
margin-top: 7px;
border-radius: 50%;
}
div.sc-cm {
overflow: hidden;
}
span.sc-usname {
font-family: arial;
font-size: 20px;
text-decoration: none;
font-weight: normal;
line-height: 25px;
}
span.sc-id {
font-size: 11px;
border: 1px solid #c1c1c1;
padding: 0 3px;
}
span.sc-time {
float: right;
font-size: 11px;
}
div.sc-cm > p {
color: #666666;
font-size: 15px;
margin: 0;
}
a.sg-arrow-top {
position: absolute;
right: 25px;
top: 0;
border: 0px !important;
}
a.sg-arrow-top > img {
height: auto;
width: 40px;
}
a.sg-arrow-bottom {
bottom: 17px;
position: absolute;
right: 25px;
border: 0px !important;
}
a.sg-arrow-bottom > img {
height: auto;
width: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-md-12 sc-global">
<div class="sc-chat-container">
<ul class="sc-chat-list sc-clg" id="sc-chat-listg">
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470422400" data-relun="66169008000" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 45</span><span class="sc-time">August 5, 2016 6:40 pm</span></div>
<p>Hi</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470479340" data-relun="67642049640" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 46</span><span class="sc-time">August 6, 2016 10:29 am</span></div>
<p>Hello</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470479400" data-relun="69112531800" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 47</span><span class="sc-time">August 6, 2016 10:30 am</span></div>
<p>Working perfect</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470490500" data-relun="77935996500" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 53</span><span class="sc-time">August 6, 2016 1:35 pm</span></div>
<p>Lokks</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470490680" data-relun="79406496720" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 54</span><span class="sc-time">August 6, 2016 1:38 pm</span></div>
<p>See</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470491160" data-relun="80877013800" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 55</span><span class="sc-time">August 6, 2016 1:46 pm</span></div>
<p>Heloo</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470491220" data-relun="82347508320" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 56</span><span class="sc-time">August 6, 2016 1:47 pm</span></div>
<p>World</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470491880" data-relun="83818037160" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 57</span><span class="sc-time">August 6, 2016 1:58 pm</span></div>
<p>hai</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470492600" data-relun="85288570800" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 58</span><span class="sc-time">August 6, 2016 2:10 pm</span></div>
<p>hello</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470677880" data-relun="86769994920" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 59</span><span class="sc-time">August 8, 2016 5:38 pm</span></div>
<p>hi</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680040" data-relun="88240802400" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 60</span><span class="sc-time">August 8, 2016 6:14 pm</span></div>
<p>Heloo</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680100" data-relun="89711486100" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 61</span><span class="sc-time">August 8, 2016 6:15 pm</span></div>
<p>mewaws</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680280" data-relun="91182177360" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 62</span><span class="sc-time">August 8, 2016 6:18 pm</span></div>
<p>Hello</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680340" data-relun="92652861420" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 63</span><span class="sc-time">August 8, 2016 6:19 pm</span></div>
<p>World</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680040" data-relun="88240802400" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 60</span><span class="sc-time">August 8, 2016 6:14 pm</span></div>
<p>Heloo</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680100" data-relun="89711486100" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 61</span><span class="sc-time">August 8, 2016 6:15 pm</span></div>
<p>mewaws</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680280" data-relun="91182177360" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 62</span><span class="sc-time">August 8, 2016 6:18 pm</span></div>
<p>Hello</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680340" data-relun="92652861420" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 63</span><span class="sc-time">August 8, 2016 6:19 pm</span></div>
<p>World</p>
</div>
</div>
</li>
</ul>
<a class="sg-arrow-top" href="" id="sg-top"><img alt="Top" src="http://skjoy.info/wp-content/uploads/2016/08/top_arrow.png"></a>
<a class="sg-arrow-bottom" href="" id="sg-bottom"><img alt="Bottom" src="http://skjoy.info/wp-content/uploads/2016/08/bottom_arrow.png"></a>
</div>
</div>
Make c_scrollTop global;因此,一旦页面被加载,c_scrollTop将包含实际的滚动位置。
之后,
scrolled = c_scrollTop;
$("#sg-top").on("click",function(){.....});
$("#sg-bottom").on("click",function(){.....});
set:
scrolled = c_scrollTop;
就在这行后面:
var c_scrollTop = container.scrollTop() + r_position.top;
var scrolled = 0;
var scrolledspreed = 100;
var container = jQuery('#sc-chat-listg');
var row = jQuery('div.sc-single-gl', container).last();
if (row.length) {
var r_position = row.position();
var c_scrollTop = container.scrollTop() + r_position.top;
scrolled = c_scrollTop;
jQuery('#sc-chat-listg').animate({scrollTop: c_scrollTop}, 1000);
}
$("#sg-top").on("click" ,function(e){
e.preventDefault();
scrolled=scrolled-scrolledspreed;
$("#sc-chat-listg").animate({
scrollTop: scrolled
});
$('.sc-inbtn').append(scrolled);
});
$("#sg-bottom").on("click" ,function(e){
e.preventDefault();
scrolled=scrolled+scrolledspreed;
$("#sc-chat-listg").animate({
scrollTop: scrolled
});
$('.sc-inbtn').append(scrolled);
});
ul.sc-chat-list {
list-style: none outside none;
margin: 0;
padding: 0;
overflow: scroll;
height: 200px;
}
ul.sc-chat-list > li {
background: none repeat scroll 0 0 #f0f0f0;
display: block;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
}
div.sc-single-chat {
border: 1px solid #c7d1c7;
padding: 11px 14px;
overflow: hidden;
}
div.sc-single-gl {
cursor: pointer;
}
div.sc-avatar {
float: left;
width: 65px;
}
div.sc-avatar > img {
margin-top: 7px;
border-radius: 50%;
}
div.sc-cm {
overflow: hidden;
}
span.sc-usname {
font-family: arial;
font-size: 20px;
text-decoration: none;
font-weight: normal;
line-height: 25px;
}
span.sc-id {
font-size: 11px;
border: 1px solid #c1c1c1;
padding: 0 3px;
}
span.sc-time {
float: right;
font-size: 11px;
}
div.sc-cm > p {
color: #666666;
font-size: 15px;
margin: 0;
}
a.sg-arrow-top {
position: absolute;
right: 25px;
top: 0;
border: 0px !important;
}
a.sg-arrow-top > img {
height: auto;
width: 40px;
}
a.sg-arrow-bottom {
bottom: 17px;
position: absolute;
right: 25px;
border: 0px !important;
}
a.sg-arrow-bottom > img {
height: auto;
width: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-md-12 sc-global">
<div class="sc-chat-container">
<ul class="sc-chat-list sc-clg" id="sc-chat-listg">
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470422400" data-relun="66169008000" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 45</span><span class="sc-time">August 5, 2016 6:40 pm</span></div>
<p>Hi</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470479340" data-relun="67642049640" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 46</span><span class="sc-time">August 6, 2016 10:29 am</span></div>
<p>Hello</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470479400" data-relun="69112531800" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 47</span><span class="sc-time">August 6, 2016 10:30 am</span></div>
<p>Working perfect</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470490500" data-relun="77935996500" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 53</span><span class="sc-time">August 6, 2016 1:35 pm</span></div>
<p>Lokks</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470490680" data-relun="79406496720" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 54</span><span class="sc-time">August 6, 2016 1:38 pm</span></div>
<p>See</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470491160" data-relun="80877013800" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 55</span><span class="sc-time">August 6, 2016 1:46 pm</span></div>
<p>Heloo</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470491220" data-relun="82347508320" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 56</span><span class="sc-time">August 6, 2016 1:47 pm</span></div>
<p>World</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470491880" data-relun="83818037160" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 57</span><span class="sc-time">August 6, 2016 1:58 pm</span></div>
<p>hai</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470492600" data-relun="85288570800" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 58</span><span class="sc-time">August 6, 2016 2:10 pm</span></div>
<p>hello</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470677880" data-relun="86769994920" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 59</span><span class="sc-time">August 8, 2016 5:38 pm</span></div>
<p>hi</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680040" data-relun="88240802400" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 60</span><span class="sc-time">August 8, 2016 6:14 pm</span></div>
<p>Heloo</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680100" data-relun="89711486100" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 61</span><span class="sc-time">August 8, 2016 6:15 pm</span></div>
<p>mewaws</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680280" data-relun="91182177360" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 62</span><span class="sc-time">August 8, 2016 6:18 pm</span></div>
<p>Hello</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680340" data-relun="92652861420" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 63</span><span class="sc-time">August 8, 2016 6:19 pm</span></div>
<p>World</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680040" data-relun="88240802400" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 60</span><span class="sc-time">August 8, 2016 6:14 pm</span></div>
<p>Heloo</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680100" data-relun="89711486100" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 61</span><span class="sc-time">August 8, 2016 6:15 pm</span></div>
<p>mewaws</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680280" data-relun="91182177360" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 62</span><span class="sc-time">August 8, 2016 6:18 pm</span></div>
<p>Hello</p>
</div>
</div>
</li>
<li>
<div class="sc-single-chat sc-single-gl" id="row-1470680340" data-relun="92652861420" data-reluid="1">
<div class="sc-avatar"><img width="50" height="50" class="avatar avatar-50 photo" src="http://0.gravatar.com/avatar/889e8e0ec0a2cc8a2fa827ced481eb56?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G" alt=""></div>
<div class="sc-cm">
<div style="overflow: hidden;"><span class="sc-usname">S.k.joy</span> <span class="sc-id">ID - 63</span><span class="sc-time">August 8, 2016 6:19 pm</span></div>
<p>World</p>
</div>
</div>
</li>
</ul>
<a class="sg-arrow-top" href="" id="sg-top"><img alt="Top" src="http://skjoy.info/wp-content/uploads/2016/08/top_arrow.png"></a>
<a class="sg-arrow-bottom" href="" id="sg-bottom"><img alt="Bottom" src="http://skjoy.info/wp-content/uploads/2016/08/bottom_arrow.png"></a>
</div>
</div>
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 将PHP变量传递给jQuery时遇到问题
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 参数变量出现ngTable指令问题
- 剑道网格jQuery动画()问题
- 在 scrollTop 上应用 Jquery 效果时遇到问题
- iPad 快速触摸的问题,当使用 jQuery animate 和 scrollTop() 时
- 移动浏览器上的 scrollTop() 滞后/滚动分辨率问题
- JavaScript中关于scrollTop的问题
- scrollTop给了我跨浏览器的问题
- scrollTop动画在chrome中是滞后的,但在firefox中工作得很好(背景尺寸:封面问题?)
- scrollTop动画的问题
- JQuery ScrollTop的淡出和淡出问题
- scrollTop ();动画的问题
- ScrollTop函数的问题-过度滚动
- 有一些问题与jQuery scrollTop
- 聊天web应用jquery scrollTop问题
- JQuery scrollTop在Chrome中导致问题
- JQuery . scrolltop()和.offset().首要问题:它是如何运作的?如何解决
- 问题与scrollto和scrolltop在chrome使用jquery