滚动到 div 的底部答案

【问题标题】：Scroll to bottom of a div滚动到 div 的底部
【发布时间】：2012-07-13 01:33:26
【问题描述】：

我在使用 jQuery 将 div 滚动到底部时遇到问题。

分区

HTML：

<div id="chatbox"></div>

CSS：

    #chatbox {
    width:300px;
    height:400px;
    background:grey;
    overflow-x:hidden;
    overflow-y:auto;
    border-radius: 10px;
    background: #045671;
}

当我使用 onclick -> $("#chatbox").scrollTop(9999) 时，滚动到底部，再次单击后出现问题，滚动向上 +20px。

示例：http://46.238.10.232:10001/chat/

【问题讨论】：

将您的代码添加到jsfiddle.net
再次点击！？！？详细说明。
@LeeKowalkowski 再次点击提交按钮后
@SVS 这里是一个快速的例子来测试46.238.10.232:10001/chat
...比如，IP 地址样式的 URL 甚至无法离开我的公司 LAN，更不用说访问它的 Internet 代理服务器了。您是否尝试过将您的示例放到网络上，而不仅仅是在互联网上？ IE。也许使用一些 DNS，也许也在网络端口上？

标签： javascript jquery html css

【解决方案1】：

如果您过度设置scrollTop，就会发生奇迹（或不会发生，取决于您的期望）。将scrollTop 设置为9999 会将scrollTop 设置为0 到9999 之间的任意数字，具体取决于需要。您也可以阅读 scrollTop，因此将其设置为x 并不意味着它将保持x，它将是实际位置，因此如果您有兴趣，它仍然有意义在查询值时。

如果元素的内容发生变化，您必须再次设置scrollTop。通常到scrollHeight 总是足够的（是的，你可以尝试完美准确地计算scrollTop，但是为什么要麻烦？让浏览器进行计算，然后重新开始工作）。

所以我猜，当您“再次点击”（无论是什么）时，您正在向聊天框添加更多内容。是的？然后你必须设置scrollTop，再次！

如果您都每次都设置scrollTop，那么您可能做得太早了。您应该在修改元素内容后执行此操作，而不仅仅是响应 onclick 事件。

【讨论】：

【解决方案2】：

$(document).scrollTop($("#chatbox").position.top+$("#chatbox").height());

【讨论】：

【解决方案3】：

<a> 标签可能会起作用。我知道它很丑陋，但是使用 css 您可以将其设置为普通文本或完全隐藏它。

将自定义元素放置在您要滚动到的位置。
将其 id 设置为（例如）scrollelement。
将window.location.hash 设置为“滚动元素”。

感谢 Lee Kowalkowski。

【讨论】：

哇！很长一段时间以来，您都不需要使用<a> element 来执行此操作（因为您能够使用 id 属性而不是 name 属性）。任何元素的 ID 都可以通过 URI 片段标识符 (#) 引用。您也可以浏览到它而无需生成点击事件或额外的<a> 元素，只需window.location.hash = 'element-id'。
使用 URI 滚动会干扰用户的浏览历史记录，因此您可能会使用这种方式给返回按钮带来不便。