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,

jQuery(document).ready(function(){
jQuery(‘body,html’).animate({scrollTop: 200}, 800);
})

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

• On the above code first, we 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 check 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} used to scroll down according to the pixel value.
• At the end last parameter 800 is used as the speed of the animation in milliseconds.

Auto Scroll For Specific Pages Using jQuery

jQuery(document).ready(function(){
if(window.location.href.indexOf(“URL_TERM_TO_CHECK”) > -1){
jQuery(‘body,html’).animate({scrollTop: 200}, 800);
}
})

• 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 contains a 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() the function.

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

jQuery(document).ready(function(){
setTimeout(function(){
jQuery(‘body,html’).animate({scrollTop: 200}, 800);
}, 2000);
})

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

Originally published at https://phpcoder.tech on August 12, 2021.