自動滾動到底部然後滾動操作

Question

嗨我正在做一個聊天腳本，我已經得到了某處需要相當修改。我需要實現的功能是成功加載用戶聊天后視圖應直接到達底部。我已經做了幾次失敗的事情，它會自動執行到底，但是當我嘗試滾動內容時，它仍會回到底部，這不應該發生。

這是我到目前爲止。

<?php 
$ctr = 0; 
if (is_array($buddies)) { 
    foreach ($buddies as $buddy) { 
?> 
     <span style="float: right;"><?php echo $buddy->unreadMsgCtr; ?></span> 
     &nbsp;<b><a href="#" class="username" id="friend<?php echo $ctr; ?>" chattingID="<?php echo $buddy->uidDetailsID?>"><?php echo humanize($buddy->fullName) ?></a></b> <br /> 
    <?php 
      ++$ctr; 
     } 
    } 
    ?> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     <?php for ($ctrjs = 0; $ctrjs < $ctr; $ctrjs++) {?> 
        $('#friend' + <?php echo $ctrjs; ?>).live('click', function() { 
         $('#buddies').hide(); 
         var chattingWith = $(this).attr('chattingID'); 

         startrefresh(); 
         $('#chatroom').show(); 
         $('#chatmessage').html('<img src="<?php echo site_url('/images/ajax-loader.gif');?>" width="16" height="16" />'); 

         $.post("<?php echo site_url('chats/chatbuddy');?>",{ 
          username: $("#friend"+<?php echo $ctrjs; ?>).html(), 
          recipientID: chattingWith 
         }); 

        }); 
     <?php } ?> 
    }); 
</script> 

//chats.php當一個特定的好友被點擊。

<script type="text/javascript"> 
var autoScrollEnabled = true; 
    $(document).ready(function() { 

     toggleAutoScroll(); 
     if(autoScrollEnabled == true) { 
      $(".messages").animate({ scrollTop: $('.messages')[0].scrollHeight}, 1000); 
      //return false; 
      toggleAutoScroll(); 
     } 

     function toggleAutoScroll() { 
      autoScrollEnabled = !autoScrollEnabled; //! reverses the value, true becomes false, false becomes true 
      if (autoScrollEnabled == true) { //scroll down immediately if a.s. is reenabled 
       $(".messages").animate({ scrollTop: $('.messages')[0].scrollHeight}, 9999999999); 
      } 
     } 

     $('#closechat').live('click', function() { 
      $('#chatroom').hide(); 
      //scrolled = 0; 
      stoprefresh(); 
     }); 
    }); 
</script> 
<div class="headerchat" style="width: 217px;"><div class="buddycontainer">&nbsp;Chatting</div> 
    <div class="closecontainer"><a href="#" id="closechat" class="close">&#x2716;</a>&nbsp;</div> 
    <br class="breaker" /> 
</div> 
<?php 
if (is_array($chat)) { 
    foreach ($chat as $item){ ?> 
     <div class="conversation" style="width: 215px;"> 
     <b><span class="username"><?php echo $item['username']; ?></span></b> 
     <span class="gray" style="float: right;" title="<?php echo date('M d, Y g:i A', $item['time']);?>">&nbsp;<?php echo date('g:i A', $item['time']);?></span> 
     <br /><?php echo $item['message']; ?> 
     </div> 
    <?php } ?> 
<?php }?> 

BTW這裏是jsfiddle我不明白它在jsfiddle中正常工作。 http://jsfiddle.net/STQnH/3/

我不知道我是否在正確的軌道上前進。我只是想實現這一點。感謝你們。

Answer 1

嘗試在包裝代碼：

$(document).ready(function(){ //your code here 
}); 

或

$(window).load(function() {//your code here 
}); 

如果它工作在的jsfiddle但不能在這很可能是缺少了什麼活動網站。 jsFiddle爲你添加它。您可以在我的徒手圈指示的下拉菜單中更改此選項。

jQuery faq for $(document).ready()