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为您添加它。您可以在我的写意圈指示的下拉菜单中更改此选项。

My first freehand circle!

jQuery faq for $(document).ready()

自动滚动到底部然后滚动操作

1 个答案: