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 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.

Code Explanation:

• On the above code first, we will use the 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 checks the HTML body and HTML start tag from where the page is started.
• animate() the animation function used to animate the web page.
• Now the {scrollTop: 200} is used to scroll down according to the pixel value.
• In the end, the last parameter 800 is used as the speed of the animation in milliseconds.

Auto Scroll For Specific Pages Using jQuery

Code Explanation:

• As I explained all the functions 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 the URL contains the given string then this code will run.
• Using that method we can run out of auto-scroll code for specific pages.

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

If you want that after the page loads 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..!