Categories
Development

Make web page to auto scroll down

Today I want to share with you how to make a web page to automatically scroll down. This is applicable in dealing with social networks pages, business directories (ex. yellow pages) and other auto-upload resources.

The code

Both setInterval() and scrollBy() are typical browser JS functions:

var scroll = setInterval(function(){ window.scrollBy(0,1000); }, 2000);

This code creates scroll JavaScript variable (as setInterval() function) and runs it. The function will scroll a page every 2 sec (2000 msec). You may adjust the auto scroll speed by changing this value. The single run down scroll height is defined by scrollBy()’s second parameter – 1000; a window will be scrolled down on 1000 px.

Insertion

In order to insert it: hit F12 (Ctrl+Shift+I at Opera browser) at a browser tab to open WebDev Tools. Choose Console tab there. Then insert the code and hit Enter.

infinite scroll js code

You might close WebDev Tools (F12) and browser’s JavaScript will still run this function.

Stop auto scrolling

To stop it without exiting page you might clear scroll variable by the following code:

clearInterval(scroll);

Otherwise, you might remove all in-browser console scripting by just reloading a web page – F5. Yet, you’ll be back to the top of the page.

Code for your web page

Also, you might insert this code in your custom web page to run on demand:

<script>
function start_scroll_down() { 
   scroll = setInterval(function(){ window.scrollBy(0, 1000); console.log('start');}, 1500);
}

function stop_scroll_down() {
   clearInterval(scroll);
   console.log('stop');
}
</script>
<button onclick="start_scroll_down();">Start Scroll</button>
<button onclick="stop_scroll_down();">Stop Scroll</button>

Be aware, though, that this code has created a global (application) JS variable called scroll.

14 replies on “Make web page to auto scroll down”

Thanks for this. Have used teh code to create a bookmarklet which when I click will continuously scroll to bottom of page. As you allude to in post, the scroll goes on forever such that you can’t scroll back up the page. Any ideas on how to get code to stop running once it has reached the absolute bottom of the page?

It’s not that hard to stop the code. JS usually identifies the current page offset position. So you might get the total page height and compare it with the current page offset.

Good morning, sir. Thank you for the codes. I used your first code and I am able to scroll down forever. However, the stop code is not working, thus my tab is constantly moving. Can you please propose an alternative code, so it could be stop next time? Thanks!

Question. Is this for web pages that you make yourself, or can you make ANY web page scroll automatically by typing in the code?

I am displaying a web browser on a TV within our office and wants the browser to automatically scroll once a webpage is opened. Can anything be added on the url to make the browser scroll by itself?

Hello,

How can I make the webpage to start auto scrolling without the need of pressing start/stop?

Nice tip! Can I define some buttons to determine how fast it goes? Like a button to “fast”, other to “slow”?… How can I do that? I know that I need a time for which button, but how can I code that?

Hello I currently have this code and I want it to start and stop using a button – the code above scrolls straight to the bottom of the page too quickly and doesnt go back up please can someone help me add the buttons to start and stop this animation

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

$(“html, body”).animate({ scrollTop: $(document).height() }, 50000);
setTimeout(function() {
$(‘html, body’).animate({scrollTop:0}, 50000);
},50000);
setInterval(function(){
// 50000 – it will take 4 secound in total from the top of the page to the bottom
$(“html, body”).animate({ scrollTop: $(document).height() }, 50000);
setTimeout(function() {
$(‘html, body’).animate({scrollTop:0}, 50000);
},50000);

},50000);

The auto scroll code works just great but how do you make it to go back to the top once it reached the bottom of the web page?

Leave a Reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.