Web2py无法滚动到页面底部

Question

Web2py无法滚动到页面底部

5

我尝试将聊天消息的焦点定位到页面底部的最新位置，但滚动条自动回到顶部。以下是我的代码： js: $(document).ready(function(){

    $('#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>

有没有办法编写代码，使其正常运行并呈现如下效果，最新消息在底部：

- user3346746

你想在页面加载时自动滚动吗？如果是这样，请不要使用 .click() 处理程序，因为它只会在单击相关的 div 时触发滚动。此外，我不明白这与 web2py 有什么关系（我看到你正在使用 web2py，但这是一个纯粹的 Javascript/jQuery 问题，与 web2py 没有任何关系）。 - Anthony

抱歉，@Antony...我在做很多Web2py相关的事情，因此使用了这个标签。我的错。 - user3346746

我仍在苦苦挣扎如何编写代码。或许能给点帮助吗？ - user3346746

你想要这样吗？：https://dev59.com/S18e5IYBdhLWcg3wqr2t - apsuva

刚刚注意到，她们是美丽的女士们 <3 <3 <3 :D - xGeo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- itacode · Accepted Answer

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

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