0

嗨，我正在做一个聊天脚本，我已经得到了一个需要相当修改的地方。我需要实现的功能是在成功加载用户后与视图聊天应该直接到底部。我做过几次失败的事情，它确实自动到底部但是当我尝试滚动内容时它仍然回到底部，这不应该发生。

这就是我到目前为止所拥有的。

    <?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 }?>

顺便说一句，这里是 jsfiddle，我不明白它在 jsfiddle 中是否正常工作。http://jsfiddle.net/STQnH/3/

我不确定我是否走在正确的轨道上。我只是想实现这一点。感谢你们。

4

1 回答 1

0

尝试将您的代码包装在：

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

或者

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

如果它在 jsFiddle 中有效，但在实时站点上无效，这可能是缺少的。jsFiddle 为你添加了它。您可以在我的手绘圆圈指示的下拉菜单中更改此选项。

我的第一个手绘圆圈！

jQuery 常见问题解答 $(document).ready()

于 2013-06-03T00:49:22.370 回答