Javascript: Scroll To Bottom Of A Div In Javascript : Scroll To Bottom Of Div

The other solutions here don"t actually work for divs with lots of content -- it "maxes out" scrolling down to the height of the div (instead of the height of the content of the div). So they"ll work, unless you have more than double the div"s height in content inside of it.

Bạn đang xem: Scroll to bottom of a div in javascript

Here is the correct version:

$("#div1").scrollTop($("#div1")<0>.scrollHeight);or jQuery 1.6+ version:

var d = $("#div1");d.scrollTop(d.prop("scrollHeight"));Or animated:

$("#div1").animate({ scrollTop: $("#div1").prop("scrollHeight")}, 1000);

All the answers that I can see here, including the currently "accepted" one, is actually wrong in that they set:

scrollTop = scrollHeightWhereas the correct approach is to set:

scrollTop = scrollHeight - clientHeightIn other words:

$("#div1").scrollTop($("#div1")<0>.scrollHeight - $("#div1")<0>.clientHeight);Or animated:

$("#div1").animate({ scrollTop: $("#div1")<0>.scrollHeight - $("#div1")<0>.clientHeight}, 1000);

UPDATE : see Mike Todd"s solution for a complete answer.

$("#div1").animate({ scrollTop: $("#div1").height()}, 1000);if you want it to be animated (over 1000 milliseconds).

$("#div1").scrollTop($("#div1").height())if you want it instantaneous.

$(window).load(function() { $("html, body").animate({ scrollTop: $(document).height() }, 1000);});This grabs the height of the page and scrolls it down once the window has loaded. Change the 1000 to whatever you need to do it faster/slower once the page is ready.

None of these worked for me, I have a message system inside a web app that"s similar to Facebook messenger and wanted the messages to appear at the bottom of a div.

This worked a treat, basic Javascript.

window.onload=function () { var objDiv = document.getElementById("MyDivElement"); objDiv.scrollTop = objDiv.scrollHeight;}
The following will work. Please note <0> and scrollHeight

$("#myDiv").animate({ scrollTop: $("#myDiv")<0>.scrollHeight }, 1000);
Scroll window to the bottom of target div.

function scrollToBottom(id){ div_height = $("#"+id).height(); div_offset = $("#"+id).offset().top; window_height = $(window).height(); $("html,body").animate({ scrollTop: div_offset-window_height+div_height },"slow");}scrollToBottom("call_div_id");
for animate in jquery (version > 2.0)

var d = $("#div1");d.animate({ scrollTop: d.prop("scrollHeight") }, 1000);
I"m working in a legacy codebase trying to migrate to Vue.

Xem thêm: 4 Chỉ Số Siêu Âm Thai 19 Tuần Máy Như Thế Nào, BáºT Mí 5 Cách Kích Thích Thai Máy Hiá»U Quáº£

In my specific situation (scrollable div wrapped in a bootstrap modal), a v-if showed new content, which I wanted the page to scroll down to. In order to get this behaviour to work, I had to wait for vue to finish re-rendering, and then use jQuery to scroll to the bottom of the modal.

So...

this.$nextTick(function() { $("#thing")<0>.scrollTop = $("#thing")<0>.scrollHeight;})
You can use below code to scroll to bottom of div on page load.

$(document).ready(function(){ $("div").scrollTop($("div").scrollHeight);});
You can check scrollHeight and clientHeight with scrollTop to scroll to bottom of div like code below.

$("#div").scroll(function (event) { if ((parseInt($("#div")<0>.scrollHeight) - parseInt(this.clientHeight)) == parseInt($("#div").scrollTop())) { console.log("this is scroll bottom of div"); } });
$(document).ready(function() { let width = $(window).width(); let element = $("#YourId"); let positionFromTop = element.offset().top + element.prop("scrollHeight"); $("html, body").animate({ scrollTop: Math.abs($(window).height() - positionFromTop) }, 500);});
When page is load then scroll is max value .

This is message box when user send message then always show latest chat in down so that scroll value is always is maxium.

$("#message").scrollTop($("#message")<0>.scrollHeight);see image

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged jquery html or ask your own question.

Your privacy

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.