我正在尝试将我的聊天消息的焦点放在最新的页面底部，但滚动会自动转到顶部。这是我的代码: js: $(文档).ready(函数){
$('#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>
有没有一种方法可以让我将其编码为正常运行，使其看起来像这样，并在底部显示最新消息:
最佳答案
似乎当点击触发时文档没有完全加载(尤其是图像)所以高度不是最终高度。 您可以在点击处理程序中使用 console.log 检查文档高度。 尝试将动画代码行放在计时器中，以便在页面重绘后执行它。
setTimeout(function () {
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
}, 100};
关于javascript - Web2py 无法滚动到页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43348316/