文章/答案/技术大牛

发布

社区首页 >问答首页 >原生Javascript滚动到底部，带有动态添加内容的div上的平滑动画

问原生Javascript滚动到底部，带有动态添加内容的div上的平滑动画
EN

Stack Overflow用户

提问于 2019-12-19 03:59:43

回答 3查看 856关注 0票数 0

我正在做一个聊天应用，我想要的是当动态消息加载时，页面会以平滑的动画向下滚动到div的底部。

<ul id="messages">
                <li>
                    <p>Not logged in on Epic | Log in here: https://epic.clow.nl/login</p>
                </li>
            </ul>

native

javascript

html

animation

scroll

回答 3

Stack Overflow用户

发布于 2021-08-10 05:03:10

平滑滚动不需要jQuery。试试这个-

window.scroll({
  top: 1000,
  behavior: 'smooth'
});

这将使网页向下跳转1000px。

票数 1

Stack Overflow用户

发布于 2019-12-19 04:20:59

使用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>元素设置为需要滚动的元素即可。

希望这能有所帮助！

票数 0

Stack Overflow用户

发布于 2019-12-19 06:16:52

好的，第二次尝试使用原生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);
}

我还没有测试过，但它可以工作。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59399218

复制

相似问题

问原生Javascript滚动到底部，带有动态添加内容的div上的平滑动画
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问原生Javascript滚动到底部，带有动态添加内容的div上的平滑动画EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问原生Javascript滚动到底部，带有动态添加内容的div上的平滑动画
EN