Scroll Page Automatically by few pixels after every few seconds using jQuery
So, In this post you will find jQuery way to "Scroll Page Automatically by few pixels after every few seconds".
Related Post:
- Find Scroll Height for elements using jQuery
- Scroll to the bottom of a textarea using jQuery
- Expand textarea as you type using jQuery
For the demo purpose, we will be scrolling the webpage by 200 pixels and after every 2 seconds. To do this, we need to use JavaScript "setInterval" method, which is responsible for calling a function/particular code after x seconds. So in this case, it would be 2 seconds.
Then, all you want is to get window scrollTop value and add 200 to it and then just scroll it.. Simple and Easy!!!!!
$(document).ready(function () {
setInterval(function () {
var iScroll = $(window).scrollTop();
iScroll = iScroll + 200;
$('html, body').animate({
scrollTop: iScroll
}, 1000);
}, 2000);
});
Now, there is an issue which above approach. That is, once you reach at the bottom of the page you setInterval will keep on calling the function after every 2 seconds which is not desired. One way is to disable the automatic scrolling once user reaches at bottom of the page.
To do this, check if user has reached to bottom of the page and then call "clearInterval()" to stop setInterval.
$(document).ready(function () {
var myInterval = false;
myInterval = setInterval(function () {
var iScroll = $(window).scrollTop();
if (iScroll + $(window).height() == $(document).height()) {
clearInterval(myInterval);
} else {
iScroll = iScroll + 200;
$('html, body').animate({
scrollTop: iScroll
}, 1000);
}
}, 2000);
});
If the above solution don't work, then please make sure that you have include document type at top of the page.
<!DOCTYPE HTML>
The issue with above approach is that it gets executed only once. As once user reaches at bottom of the page, then setInterval is stopped. What if you want to have it again once user reaches at top of the page? Below jQuery code block exactly does the same thing.
As once bottom of the page is reached, then setInterval is stopped. So need to find a way to enable it again. And that can be done in $(window).scroll event. In this event, check if user has reached at top of the page. If yes, then reset setInterval.. That's it..
Note: For demo, I have set 500 as pixels to scroll.
$(document).ready(function () {
var myInterval = false;
myInterval = setInterval(AutoScroll, 2000);
function AutoScroll() {
var iScroll = $(window).scrollTop();
iScroll = iScroll + 500;
$('html, body').animate({
scrollTop: iScroll
}, 1000);
}
$(window).scroll(function () {
var iScroll = $(window).scrollTop();
if (iScroll == 0) {
myInterval = setInterval(AutoScroll, 2000);
}
if (iScroll + $(window).height() == $(document).height()) {
clearInterval(myInterval);
}
});
});
If the above solution don't work, then please make sure that you have include document type at top of the page.
<!DOCTYPE HTML>
Feel free to contact me for any help related to jQuery, I will gladly help you.
