Autoscroll to bottom of page then top and repeat

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

回答1:

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/

回答2:

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/

回答3:

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

回答4:

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.