滚动到div底部？

这是我在我的网站上使用的：

var objDiv = document.getElementById("your_div");objDiv.scrollTop = objDiv.scrollHeight;

如果您使用jQuery scrollTop，这会容易得多：

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);

使用jQuery动画：

$('#DebugContainer').stop().animate({scrollTop: $('#DebugContainer')[0].scrollHeight}, 800);

var mydiv = $("#scroll");mydiv.scrollTop(mydiv.prop("scrollHeight"));

来自jQuery 1.6的作品

https://api.jquery.com/scrollTop/

http://api.jquery.com/prop/

如果您不想依赖scrollHeight，以下代码会有所帮助：

$('#scroll').scrollTop(1000000);

小附录：仅滚动，如果最后一行已经可见。如果滚动一点点，将内容留在原地（注意：未测试不同的字体大小。这可能需要在“>=比较”中进行一些调整）：

var objDiv = document.getElementById(id);var doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight);
// add new content to div$('#' + id ).append("new line at end<br>"); // this is jquery!
// doScroll is true, if we the bottom line is already visibleif( doScroll) objDiv.scrollTop = objDiv.scrollHeight;

就像一个奖励片段。当用户选择与用户进行不同的对话时，我正在使用角并试图将消息线程滚动到底部。为了确保在新数据加载到带有ng-重复消息的div后滚动工作，只需超时包装滚动片段。

$timeout(function(){var messageThread = document.getElementById('message-thread-div-id');messageThread.scrollTop = messageThread.scrollHeight;},0)

这将确保在数据插入DOM后触发滚动事件。

适用于所有当前浏览器的新方法：

this.scrollIntoView(false);

使用jQuery，scrollTop用于设置任何给定元素的scolbar的垂直位置。还有一个不错的jQuery scrollTo插件用于滚动动画和不同的选项（演示）

var myDiv = $("#div_id").get(0);myDiv.scrollTop = myDiv.scrollHeight;

如果您想使用jQuery的动画方法在向下滚动时添加动画，请检查以下片段：

var myDiv = $("#div_id").get(0);myDiv.animate({scrollTop: myDiv.scrollHeight}, 500);

这将让您一直向下滚动关于文档高度

$('html, body').animate({scrollTop:$(document).height()}, 1000);

我发现这真的很有帮助，谢谢。

对于Angular 1. X的人来说：

angular.module('myApp').controller('myController', ['$scope', '$document',function($scope, $document) {
var overflowScrollElement = $document[0].getElementById('your_overflow_scroll_div');overflowScrollElement[0].scrollTop = overflowScrollElement[0].scrollHeight;
}]);

只是因为jQuery元素与超文本标记语言DOM元素的包装与角度有点混淆。

同样对于聊天应用程序，我发现在您的聊天加载后进行此分配是有用的，您可能还需要设置短超时。

我遇到了同样的问题，但有一个额外的限制：我无法控制将新元素附加到滚动容器的代码。我在这里找到的示例都不允许我这样做。这是我最终的解决方案。

它使用Mutation Observers（https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver），这使得它只能在现代浏览器上使用（尽管存在Poly填充）

所以基本上代码就是这样做的：

var scrollContainer = document.getElementById("myId");
// Define the Mutation Observervar observer = new MutationObserver(function(mutations) {
// Compute sum of the heights of added Nodesvar newNodesHeight = mutations.reduce(function(sum, mutation) {return sum + [].slice.call(mutation.addedNodes).map(function (node) { return node.scrollHeight || 0; }).reduce(function(sum, height) {return sum + height});}, 0);
// Scroll to bottom if it was already scrolled to bottomif (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 >= scrollContainer.scrollHeight) {scrollContainer.scrollTop = scrollContainer.scrollHeight;}
});
// Observe the DOM Elementobserver.observe(scrollContainer, {childList: true});

我做了一个小提琴来演示这个概念：https://jsfiddle.net/j17r4bnk/

试试下面的代码：

const scrollToBottom = (id) => {const element = document.getElementById(id);element.scrollTop = element.scrollHeight;}

您还可以使用JQuery使滚动平滑：

const scrollSmoothlyToBottom = (id) => {const element = $(`#${id}`);element.animate({scrollTop: element.prop("scrollHeight")}, 500);}

这里是demo

以下是它的工作原理：

参考：scrollTop、滚动高度、客户端高度

您还可以使用jQuery，通过以下方式将动画附加到文档的html,body：

$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop}, 1000);

这将导致平滑滚动到ID为“div-id”的div顶部。

Javascript或jQuery：

var scroll = document.getElementById('messages');scroll.scrollTop = scroll.scrollHeight;scroll.animate({scrollTop: scroll.scrollHeight});

css：

 .messages{height: 100%;overflow: auto;}

我知道这是一个老问题，但这些解决方案都不适合我。我最终使用偏移（）. top来获得所需的结果。这是我在聊天应用程序中轻轻向下滚动屏幕到最后一条消息的方法：

$("#html, body").stop().animate({scrollTop: $("#last-message").offset().top}, 2000);

我希望这能帮助别人。

Java脚本：

document.getElementById('messages').scrollIntoView(false);

滚动到当前内容的最后一行。

一个非常简单的方法是将scroll to设置为div的高度。

var myDiv = document.getElementById("myDiv");window.scrollTo(0, myDiv.innerHeight);

滚动到div中的最后一个元素：

myDiv.scrollTop = myDiv.lastChild.offsetTop

光滑使用Javascript滚动：

document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });

使用：

var element= $('element');var maxScrollTop = element[0].scrollHeight - element.outerHeight();element.scrollTop(maxScrollTop);

或检查滚动到底部：

    var element = $(element);var maxScrollTop = element[0].scrollHeight - element.outerHeight();element.on('scroll', function() {if ( element.scrollTop() >= maxScrollTop ) {alert('scroll to bottom');}});

如果在滚动到聊天窗口底部时执行此操作，请执行以下操作

滚动到聊天中的特定div的想法如下

1）每个由Person、时间和消息组成的聊天div都在一个具有chat Contentbox类的for循环中运行

2）querySelectorAll找到所有这样的数组。它可能是400个节点（400个聊天）

3）去最后一个

4）显示视图scrollIntoView（）

let lastChatBox = document.querySelectorAll('.chatContentBox');lastChatBox = lastChatBox[lastChatBox.length-1];lastChatBox.scrollIntoView();

有时候最简单的方法就是最好的方法：我不知道这是否会有帮助，它也帮助我滚动它。“y=”越高，它滚动得越多，当然“0”意味着顶部，所以例如“1000”可能是底部，或“2000”或“3000”等等，这取决于你的页面有多长。这通常适用于带有onClick或onmouseover的按钮。

window.scrollTo(x=0,y=150);

将与可滚动元素顶部的距离设置为元素的总高度。

const element = this.shadowRoot.getElementById('my-scrollable-div')element.scrollTop = element.scrollHeight

在我的Angular 6应用程序中，我只是这样做：

postMessage() {// post functions herelet history = document.getElementById('history')let intervalinterval = setInterval(function() {history.scrollTop = history.scrollHeightclearInterval(interval)}, 1)}

clearInterval（间隔）功能将停止计时器以允许手动滚动顶部/底部。

您可以像这样使用超文本标记语言DOM scrollIntoView方法：

var element = document.getElementById("scroll");element.scrollIntoView();

我的场景：我有一个字符串列表，我必须在其中附加一个用户给出的字符串并自动滚动到列表的末尾。我有固定的列表显示高度，之后它应该溢出。

我尝试了@Jeremy Ruten的答案，它起作用了，但它正在滚动到第（n-1）个元素。如果有人面临这种问题，你可以使用setTimeOut()方法解决方法。你需要将代码修改为以下内容：

setTimeout(() => {var objDiv = document.getElementById('div_id');objDiv.scrollTop = objDiv.scrollHeight}, 0)

这是我创建的StcakBlitz链接，显示了问题及其解决方案：https://stackblitz.com/edit/angular-ivy-x9esw8

像你一样，我正在构建一个聊天应用程序，并希望最近的消息滚动到视图中。这最终对我很有效：

//get the div that contains all the messageslet div = document.getElementById('message-container');
//make the last element (a message) to scroll into view, smoothly!div.lastElementChild.scrollIntoView({ behavior: 'smooth' });

我使用第一个项目div的Y坐标和选定项目div的Y坐标之间的差异。这是JavaScript/JQuery代码和html：

function scrollTo(event){// In my proof of concept, I had a few <button>s with value// attributes containing strings with id selector expressions// like "#item1".let selectItem = $($(event.target).attr('value'));let selectedDivTop = selectItem.offset().top;
let scrollingDiv = selectItem.parent();
let firstItem = scrollingDiv.children('div').first();let firstItemTop = firstItem.offset().top;
let newScrollValue = selectedDivTop - firstItemTop;scrollingDiv.scrollTop(newScrollValue);}

<div id="scrolling" style="height: 2rem; overflow-y: scroll"><div id="item1">One</div><div id="item2">Two</div><div id="item3">Three</div><div id="item4">Four</div><div id="item5">Five</div></div>

您可以使用Element.scrollTo（）方法。

它可以使用内置的浏览器/操作系统动画进行动画处理，因此非常流畅。

function scrollToBottom() {const scrollContainer = document.getElementById('container');scrollContainer.scrollTo({top: scrollContainer.scrollHeight,left: 0,behavior: 'smooth'});}
// initialize dummy contentconst scrollContainer = document.getElementById('container');const numCards = 100;let contentInnerHtml = '';for (let i=0; i<numCards; i++) {contentInnerHtml += `<div class="card mb-2"><div class="card-body">Card ${i + 1}</div></div>`;}scrollContainer.innerHTML = contentInnerHtml;

.overflow-y-scroll {overflow-y: scroll;}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column vh-100"><div id="container" class="overflow-y-scroll flex-grow-1"></div><div><button class="btn btn-primary" onclick="scrollToBottom()">Scroll to bottom</button></div></div>

替代解决方案

function scrollToBottom(element) {element.scroll({ top: element.scrollHeight, behavior: 'smooth' });}

仅限css：

.scroll-container {overflow-anchor: none;}

使其在添加子元素时滚动条不会固定在顶部。例如，当在聊天底部添加新消息时，将聊天滚动到新消息。

如果您的项目目标是现代浏览器，您现在可以使用CSS滚动单元来控制滚动行为，例如将任何动态生成的元素保留在底部。

    .wrapper > div {background-color: white;border-radius: 5px;padding: 5px 10px;text-align: center;font-family: system-ui, sans-serif;}
.wrapper {display: flex;padding: 5px;background-color: #ccc;border-radius: 5px;flex-direction: column;gap: 5px;margin: 10px;max-height: 150px;
/* Control snap from here */overflow-y: auto;overscroll-behavior-y: contain;scroll-snap-type: y mandatory;}
.wrapper > div:last-child {scroll-snap-align: start;}

<div class="wrapper"><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div><div>06</div><div>07</div><div>08</div><div>09</div><div>10</div></div>

为什么不使用简单的CSS来做到这一点？

诀窍是使用显示：flex；和flex-方向：列反向；

Here is a working example. https://codepen.io/jimbol/pen/YVJzBg