I have written a fiddle that scrolls a div up and down automatically which is working fine. But there is an issue when it scrolls down, it doesn't show the last row ("String4" in this case). can anybody help me to sort this out please.
<div class="container">
<div class="content">
<p>string1</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string0</p>
<p>string1</p>
<p>string2</p>
<p>string3</p>
<p>string4</p>
<p> </p>
</div>
and js stuff:
$(document).ready(function() {
if ($('.content').height() > $('.container').height()) {
setInterval(function () {
start();
}, 3000);
}
});
function animateContent(direction) {
var animationOffset = $('.container').height() - $('.content').height();
if (direction == 'up') {
animationOffset = 0;
}
console.log("animationOffset:"+animationOffset);
$('.content').animate({ "marginTop": (animationOffset)+ "px" }, 5000);
}
function up(){
animateContent("up")
}
function down(){
animateContent("down")
}
function start(){
setTimeout(function () {
down();
}, 2000);
setTimeout(function () {
up();
}, 2000);
setTimeout(function () {
console.log("wait...");
}, 5000);
}
Here is good solution
check here only
$(document).ready(function() {
if ($('.content').height() > $('.container').height()) {
setInterval(function () {
start();
}, 3000);
}
});
function animateContent(direction) {
var animationOffset = $('.container').height() - $('.content').height()-30;
if (direction == 'up') {
animationOffset = 0;
}
console.log("animationOffset:"+animationOffset);
$('.content').animate({ "marginTop": (animationOffset)+ "px" }, 5000);
}
function up(){
animateContent("up")
}
function down(){
animateContent("down")
}
function start(){
setTimeout(function () {
down();
}, 2000);
setTimeout(function () {
up();
}, 2000);
setTimeout(function () {
console.log("wait...");
}, 5000);
}
.container { height:250px; background:red; padding:0 10px; overflow:hidden; }
.content { background:#eee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="content">
<p>string1</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string0</p>
<p>string1</p>
<p>string2</p>
<p>string3</p>
<p>string4</p>
</div>
</div>
make
var animationOffset = $('.container').height() - $('.content').height()-30;
as may be padding interrupts your height.
I have removed your empty p tag.
here is the Fiddle
Try This: Might be stupid but does the work:
<div class="container">
<div class="content">
<p>string1</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string</p>
<p>string0</p>
<p>string1</p>
<p>string2</p>
<p>string3</p>
<p>string4</p>
<p><br> </p>
</div>
</div>
Here is the updated fiddle: http://jsfiddle.net/f7e3d440/9/
Sanjeev Kumar
Try to put the following code:
var myDiv = document.getElementById('content');
myDiv.scrollTop = myDiv.scrollHeight;
Div Overflow Scroll-to-bottom: Is it possible?
http://www.codeproject.com/Questions/632251/How-to-make-div-scroll-to-bottom-on-load
来源:https://stackoverflow.com/questions/29714096/jquery-auto-scroll-a-div-up-down