Question

我试图将聊天消息的焦点放在页面底部最新的聊天消息上，但滚动会自动转到顶部。这是我的代码： JS： $（文件）。就绪（功能）{

    $('#GridDiv').click(function(){
        $('html, body').animate({scrollTop:$(document).height()}, 'slow');
        return false;
    })
}

html：

{{ extend 'layout.html' }}

<head>
    <title>Britam Intell Services</title>
    <link rel="stylesheet" type="text/css" href="{{=URL('static', 'css/index.css')}}">
    <script src="index.js" language="javascript" type="text/javascript"></script>
</head>

<div class="well" id="GridDiv">
    <div class="chatbox">
        <div class="chatlogs">
            <div class="chat">
                {{for reply in replies:}}
                <div class="chat self">
                    <div class="user-photo"><img src="{{=URL('static','images/userOne.png')}}"/></div>
                    <p class="chat-message">
                        <small>{{=prettydate(reply.created_on)}}</small>
                        {{=XML(reply.quest.replace('\n','<br>'))}}
                    </p>
                </div>
            </div>
            <div class="chat">
                <div class="chat friend">
                    <div class="user-photo"><img src="{{=URL('static','images/userTwo.png')}}"/></div>
                    <p class="chat-message">
                        {{=XML(reply.message.replace('\n','<br>'))}}
                    </p>
                </div>
                {{pass}}
             </div>
        </div>
        {{=form.custom.begin}}
        <div class='chat-form'>
            <textarea name="message"></textarea>
            <button>
                Send
            </button>
        </div>
        {{=form.custom.end}}
    </div>
</div>

有没有一种方法可以使用最新消息在底部对此进行正常运行以使其看起来像这样：

Answer 1

似乎当单击触发文档时未完全加载（特别是图像），因此高度不是最后一个。您可以使用单击处理程序中的console.log检查文档高度。尝试将动画代码行放在计时器中，以便在页面重绘后执行它。

setTimeout(function () {
 $('html, body').animate({scrollTop:$(document).height()}, 'slow');
}, 100};

Web2py无法滚动到页面底部

1 个答案: