javascript tutorial - [Solved-5 Solutions] Scroll to bottom of div - javascript - java script - javascript array
Problem:
We are creating a chat using ajax requests in rails and I'm trying to get a div to scroll to the bottom without much luck. We are wrapping everything in this div:
#scroll {
height:400px;
overflow:scroll;
}
click below button to copy the code. By JavaScript tutorial team
Is there a way to keep it scrolled to the bottom by default using JS ? Is there a way to keep it scrolled to the bottom after an ajax request ?
Solution 1:
Here's what we use on my site (We didn't write it, we just found it somewhere since we don't know Javascript too well.)
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
click below button to copy the code. By JavaScript tutorial team
Solution 2:
This is much easier if you're using jQuery:
$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);
click below button to copy the code. By JavaScript tutorial team
Solution 3:
using jQuery animate:
$('#DebugContainer').stop().animate({
scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);
click below button to copy the code. By JavaScript tutorial team
Solution 4:
jQuery version:
var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));
click below button to copy the code. By JavaScript tutorial team
Works from jQuery 1.6
Solution 5:
Newer method :
this.scrollIntoView(false);