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');
I'm working in a legacy codebase trying to migrate to Vue.
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;
})
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.
You can check scrollHeight and clientHeight with scrollTop to scroll to bottom of div like code below.
$('#div').scroll(function (event) {_x000D_
if ((parseInt($('#div')[0].scrollHeight) - parseInt(this.clientHeight)) == parseInt($('#div').scrollTop())) _x000D_
{_x000D_
console.log("this is scroll bottom of div");_x000D_
}_x000D_
_x000D_
});
_x000D_
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);
$(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.
The following will work. Please note [0]
and scrollHeight
$("#myDiv").animate({ scrollTop: $("#myDiv")[0].scrollHeight }, 1000);
try this:
$('#div1').scrollTop( $('#div1').height() )
You can use below code to scroll to bottom of div on page load.
$(document).ready(function(){
$('div').scrollTop($('div').scrollHeight);
});
for animate in jquery (version > 2.0)
var d = $('#div1');
d.animate({ scrollTop: d.prop('scrollHeight') }, 1000);
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;
}
All the answers that I can see here, including the currently "accepted" one, is actually wrong in that they set:
scrollTop = scrollHeight
Whereas the correct approach is to set:
scrollTop = scrollHeight - clientHeight
In other words:
$('#div1').scrollTop($('#div1')[0].scrollHeight - $('#div1')[0].clientHeight);
Or animated:
$("#div1").animate({
scrollTop: $('#div1')[0].scrollHeight - $('#div1')[0].clientHeight
}, 1000);
Source: Stackoverflow.com