聊天 Web 应用程序 jquery scrollTop 问题

Chat web application jquery scrollTop issue

我开发了一个聊天网络应用程序。面临有关 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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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>

设置：

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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&amp;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(){.....});