Auto Scroll Down on Page Load Using jQuery

To Auto Scroll Down on Page Load using jQuery, we use $( document ).ready() that helps us to check the page Document Object Model (DOM) is ready or not to execute the JavaScript code.

Generally, the document ready function is used to check the complete web page load and then execute the user’s JavaScript code.

Auto Scroll Down on Page Load jQuery
Auto Scroll Down on Page Load jQuery

Auto Scroll Down on Page Load Using jQuery

Here is the complete code to do auto-scroll functionality on your web page,

Note: Make sure you have already included the jQuery CDN library.

Also Read: 4 Steps to Upload Image Using Ajax and JQuery

Code Explanation:

  • On the above code first we use document read function to check the complete page load or wait for JS execution.
  • Now, we put our auto scroll functionality code inside the ready function.
  • jQuery(‘body,html’) that jQuery selector check the HTML body and html start tag from where page is started.
  • animate() the animation function used to animate the web page.
  • Now the {scrollTop: 200} used to scroll down acording the pixel value.
  • At the end last parameter 800 is used as the speed of animation in miliseconds.

Auto Scroll For Specific Pages Using jQuery

Also Read: How jQuery DataTable Works

Code Explanation:

  • As I explained all the function which we use to do this task.
  • Here we use a JavaScript function (window.location.href.indexOf("URL_TERM_TO_CHECK") > -1) which we used to check our URL string.
  • If URL containts given string then this code will run.
  • Using that method we can run out auto scroll code for specific pages.

We also can set time on our auto scroll by using setTimeout() function.

If you want that after page load wait for two seconds then scroll the page, then we use the below code,

Here we just add the setTimeout function with two seconds. And place our auto scroll jQuery code inside it.

I hope you all are clear with the complete source code. Please let me know if you facing any issues with the same.

Happy Coding..!

Was this article helpful?
My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH. I am a web Programmer by profession and working on more than 50 projects to date. Currently I am working on the web-based project and all the CMS and frameworks which are based on PHP.
Posts created 188

One thought on “Auto Scroll Down on Page Load Using jQuery

Leave a Reply

Your email address will not be published.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top