Autoscroll to bottom of page then top and repeat

2019-02-14 16:24发布

站内问答 / jQuery
483 4 4

I have created a dashboard which echos out all the rows but I want an auto scroll which will slowly scroll down the bottom of the page and then scroll slowly back to the top and repeat. I have googled this and can't get a working code. I have been looking for jQuery codes but anything will do.

Because the page will adjust all the time it cant have fixed height scroll.

Not sure if you need more information but if you do I will update this question.

Regards Gambit

4条回答
我命由我不由天
2楼-- · 2019-02-14 16:39

You could use something like this.

//run instantly and then goes after (setTimeout interval)

    $("html, body").animate({ scrollTop: $(document).height() }, 4000);
    setTimeout(function() {
       $('html, body').animate({scrollTop:0}, 4000); 
    },4000);
  var scrolltopbottom =  setInterval(function(){
         // 4000 - it will take 4 secound in total from the top of the page to the bottom
    $("html, body").animate({ scrollTop: $(document).height() }, 4000);
    setTimeout(function() {
       $('html, body').animate({scrollTop:0}, 4000); 
    },4000);

    },8000);

​//Use this to stop the scroller -> clearInterval(scrolltopbottom);

Example: http://jsfiddle.net/NaP8D/11/

查看更多
0人赞 添加讨论(0) 举报
We Are One
3楼-- · 2019-02-14 16:45

Here, this should work good, just change 5000 to the time in ms to adjust the speed.

http://jsfiddle.net/BDc6S/3/

function scrollDown(el) {
    el.animate({
        scrollTop: el[0].scrollHeight
    }, 5000, function() {
        scrollUp(el)
    });
};

function scrollUp(el) {
    el.animate({
        scrollTop: 0
    }, 5000, function() {
        scrollDown(el);
    });
};

scrollDown($("html,body"));​
查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
4楼-- · 2019-02-14 16:48

you should try this for better result

//run instantly and then goes after (setTimeout interval)

$("html, body").animate({ scrollTop: $(document).height() }, 4000);

setTimeout(function() {
   $('html, body').animate({scrollTop:0}, 4000); 
},4000);


setInterval(function(){
     // 4000 - it will take 4 secound in total from the top of the page to the bottom
$("html, body").animate({ scrollTop: $(document).height() }, 4000);
setTimeout(function() {
   $('html, body').animate({scrollTop:0}, 4000); 
},4000);
    
},8000);


$('html, body').mouseover(function(e) {
$(this).stop(true);
      
    }).mouseout(function() {
         $(this).stop(false);
    });
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="height:2000px; float:left; width:100%;">
Text text
Text text
    Text text
    
    Text text
    Text text
    Text text
    Text text
    
    
    
    Text text
    Text textv
    Text text
    Text text
    
    Text text
    Text textText text
     Text textText text Text textText text
      Text textText text Text textText text Text textText text Text textText text Text textText text
       <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p>Text textText text
     <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p>
        <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p> <p>
             Text textText text Text textText text Text textText text Text textText text Text textText text
       </p>
    

</div>

http://jsfiddle.net/neelu/gvvnd0tt/8/

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
5楼-- · 2019-02-14 16:51 
function doSomething() {
  $(document).scrollTop($(document).height());
}
setInterval(doSomething, 5000);

This will scroll to bottom of the page every 5 seconds. This will be useful, if you have auto load content based on user scroll like facebook.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)