我正在制作一个聊天应用程序，当加载动态消息时，我想存档的内容是，页面以平滑的动画向下滚动到div的底部。
<ul id="messages">
<li>
<p>Not logged in on Epic | Log in here: https://epic.clow.nl/login</p>
</li>
</ul>
原生Javascript滚动到底部，在div上具有平滑动画，并带有动态添加的内容
•
问答
netdyk 回答：原生Javascript滚动到底部，在div上具有平滑动画，并带有动态添加的内容
您可以使用jquery轻松实现这一目标。只需将其添加到您的<head>：
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
然后将其添加到您的javascript文件中：
function messagesAreLoaded() {
$("div").animate({ scrollTop: $(document).height() },"slow");
}
在加载消息时需要调用此函数。 <div>元素然后滚动到底部。只需将<div>元素设置为需要滚动的任何元素即可。
希望这会有所帮助！
,第二次尝试使用本机javascript。
有此功能。
window.scrollBy(0,50);
这会在每次执行窗口时将窗口向下滚动50个，这样您就可以像循环一样进行滚动了。
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
做类似的事情
function smoothToBottom() {
// change the time to make the ani go faster or slower
var scrollTimer = setInterval(scrollDown,200);
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
clearInterval(scrollTimer);
}
}
function scrollDown() {
window.scrollBy(0,10);
}
我还没有测试过，但是可以用。
,平滑滚动不需要jQuery。试试这个 -
<input type="number" value="0" id="stationSelector">
<p id="averageTemperature"></p>这会将网页向下跳转 1000 像素。