我开发了一个聊天网络应用程序。面临有关 jquery scrollTop 的问题。请参阅下面的代码片段。
我想要什么...在页面加载事件上，所有聊天对话都会滚动到底部并显示最后一条消息。单击顶部箭头按钮时，它将缓慢滚动，反之亦然。
我得到的...在页面加载时，所有对话都滚动到底部。然后，当按下顶部或底部的任何按钮时，它会一直到达顶部(它是主要的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>最佳答案
使c_scrollTop全局化， 因此，一旦页面加载，c_scrollTop将包含实际的滚动位置。
之后，
scrolled = c_scrollTop;
$("#sg-top").on("click",function(){.....});
$("#sg-bottom").on("click",function(){.....});
关于javascript - 聊天 Web 应用程序 jquery scrollTop 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38950270/