JQuery auto scroll a div Up and Down

Question

I wrote a fiddle that automatically scrolls the div up and down, which works fine. But there is a problem when it scrolls down, in this case the last line is not displayed ("String4" in this case). can someone help me figure this out.

<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); } 

Answer 1

Here is a 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> 

to do

 var animationOffset = $('.container').height() - $('.content').height()-30; 

which can be an addition, interrupts your height.

I removed the empty p tag.

here is fiddle

Answer 2

Try this: maybe it's stupid, but does the job:

 <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/

Answer 3

Try entering the following code:

 var myDiv = document.getElementById('content'); myDiv.scrollTop = myDiv.scrollHeight; 

Div Overflow Scroll down: is this possible?

http://www.codeproject.com/Questions/632251/How-to-make-div-scroll-to-bottom-on-load