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.

4 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. Great Article
    Cyber Security Projects

    projects for cse

    Networking Projects

    JavaScript Training in Chennai

    JavaScript Training in Chennai

    The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

    ReplyDelete
  4. I was incredibly amazed with how well you articulated everything. Your understanding on this subject is unquestionably extensive given how instructive it is. It was a joy reading your writing on the subject. Helpful informationWebsite Design Vancouver . I appreciate you sharing this wonderful article.

    ReplyDelete