jQuery auto scroll a div Up & down

和自甴很熟 提交于 2019-12-05 03:11:50

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!