我尝试将聊天消息的焦点定位到页面底部的最新位置,但滚动条自动回到顶部。以下是我的代码: 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>
有没有办法编写代码,使其正常运行并呈现如下效果,最新消息在底部:
![enter image description here](https://istack.dev59.com/HFIal.webp)
.click()
处理程序,因为它只会在单击相关的 div 时触发滚动。此外,我不明白这与 web2py 有什么关系(我看到你正在使用 web2py,但这是一个纯粹的 Javascript/jQuery 问题,与 web2py 没有任何关系)。 - Anthony