Tuesday 25 October 2016

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:

JavaScript

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

This code creates scroll JavaScript variable (assetInterval() 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.

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:

JavaScript

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.

6 comments:

  1. iOS developers are in high demand in this way thousands of people trying to join iOS group most of them have not clear understanding about iOS development as directed by http://www.college-paper-writing-service.reviews experts in article. HR department is responsible to hire a person that has good command about that.

    ReplyDelete
  2. Good Sound Advice for the developers who are looking to improve their performance of the business. Thanks for sharing this blog!
    Hire Dedicated Opencart Developers
    Hire Dedicated Developers
    Hire Dedicated Programmers
    Dedicated Magento Developer
    Hire Dedicated Magento Developer

    ReplyDelete
  3. Yes. You done really nice work for us. This web page blog is very helpful and useful. Thanks for sharing this blog. Now it's time to avail limo service west palm beach for more information.

    ReplyDelete
  4. Allessaywriter.com is an online platform that provides academic writing services to students worldwide. It offers a wide range of writing assistance, including essays, research papers, term papers, dissertations, thesis statements, and more. The platform aims to help students with their academic assignments and relieve their stress by providing high-quality, custom-written papers.

    ReplyDelete
  5. Yes. You done really nice work for us. This web page blog is very helpful and useful. Thanks for sharing this blog. Now it's time to avail Glaima

    ReplyDelete