jQuery auto scroll a div Up & down

Question

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

nirmal · Accepted Answer · 2015-04-18T07:29:53.640

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

no, it works only if you have the
appended as the accepted answer. remove the
from fiddle and try with your code, it doen't work. Thanks for the try nirmal. — Nomesh DeSilva, Apr 18 '15 at 07:23
you can check code right here. while the answer you marked as correct. you can not see your border bottom. Which I don't think so is good thing. Else selecting to go with which is your choice. — nirmal, Apr 18 '15 at 08:00
That is now working like a charm! and a great clean solution. Thanks Nirmal. — Nomesh DeSilva, Apr 18 '15 at 08:50

score 2 · Answer 2 · answered Apr 18 '15 at 07:11

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/

score 0 · Answer 3 · edited May 23 '17 at 11:46

0

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

edited May 23 '17 at 11:46

Community

1
1

answered Apr 18 '15 at 07:25

Sanjeev Kumar

9
2

score 0 · Answer 4 · answered Dec 23 '20 at 13:35

This fiddle works great for dynamically generated content. https://jsfiddle.net/bsxcL71L/2/

function down() {
$('html, body').animate({ scrollTop: hg}, 20000);
up();
};
function up() {
$('html, body').animate({ scrollTop: $('#start').offset().top }, 20000);
down();
};
$(document).ready(function () {
hg = $('#content').height() - 420;
down();
});

jQuery auto scroll a div Up & down

4 Answers4

Linked