How to animate List from Down to Up

Question

How to animate List from Down to Up

161 views Asked by Ambuj Khanna At 23 November 2024 at 12:55

I am creating a small animation which work like Up to Down and once it will scroll till end then it will go Down to Up and it will repeat again and again.

<style>
#scrollList{height:150px; width:200px; overflow:auto; margin:40px auto;}
#scrollList li{height:45px;}
</style>
<script type="text/javascript">
//document.getElementById("scrollList").setAttribute("onClick","scrollList()");
function scrollList() {
//var scrollHeight = document.getElementById("scrollList").scrollTop;
//console.log(scrollHeight);

var ActualscrollHeight = document.getElementById("scrollList").clientHeight;
console.log(ActualscrollHeight);

setInterval(function(){
var scrollHeight = document.getElementById("scrollList").scrollTop;
if(scrollHeight <= ActualscrollHeight){
scrollHeight = scrollHeight + 1;
//console.log(scrollHeight);
document.getElementById("scrollList").scrollTop=scrollHeight;
}


}, 3);
}
</script>

<body onload="scrollList()">
<ul id="scrollList">
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
</ul>

Original Q&A

There are 2 answers

Syed Muhammad Zeeshan On 11 November 2014 at 06:51

You can do this by using jQuery i.e:

$("#scrollList").load(function(){

    while(1){
        $(this).slideUp(1000);
        $(this).slideDown(1000);
    }

});

Hope this helps.

**Anujith** · Accepted Answer · 2014-11-11 06:51:19

Try this:

function scrollList() {
    var ActualscrollHeight = document.getElementById("scrollList").clientHeight;
    var down = true;
    setInterval(function () {
        var scrollHeight = document.getElementById("scrollList").scrollTop;
        if (scrollHeight == 0) {
            down = true;
        } else if (scrollHeight >= ActualscrollHeight) {
            down = false;
        }
        scrollHeight = (!down) ? scrollHeight - 1 : scrollHeight + 1;
        document.getElementById("scrollList").scrollTop = scrollHeight;
    }, 3);
}

Fiddle

TechQA.

How to animate List from Down to Up

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in ANIMATION

Related Questions in SCROLL

Related Questions in VERTICAL-SCROLLING

Popular Questions

Popular Tags

Trending Questions