22

I am trying to implement some code on my web page to auto-scroll after loading the page. I used a Javascript function to perform auto-scrolling, and I called my function when the page loads, but the page is still not scrolling smoothly! Is there any way to auto scroll my page smoothly?

Here is my Javascript function:

function pageScroll() {
        window.scrollBy(0,50); // horizontal and vertical scroll increments
        scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
MattGotJava
  • 185
  • 3
  • 14
hiteshtr
  • 443
  • 2
  • 5
  • 20

8 Answers8

47

It's not smooth because you've got the scroll incrementing by 50 every 100 milliseconds.

change this and the amount you are scrolling by to a smaller number to have the function run with the illusion of being much more 'smooth'.

turn down the speed amount to make this faster or slower.

function pageScroll() {
    window.scrollBy(0,1);
    scrolldelay = setTimeout(pageScroll,10);
}

will appear to be much smoother, try it ;)

Michael Zaporozhets
  • 23,588
  • 3
  • 30
  • 47
  • 1
    can u tell me a way in this code so that i can stop the auto scrolling when user uses mouse to scroll – hiteshtr Mar 23 '12 at 11:52
  • if this is the correct answer then be sure to mark it so ;) also, that would require another function done most easily using jquery and checking it as an event – Michael Zaporozhets Mar 23 '12 at 12:01
  • 1
    I suggest not passing a string to `setTimeout` as that is equivalent to calling `eval('pageScroll')` use something like `setTimeout(function(){ //coolcodehere }, 10)` where you pass a function to setTimeout, not a string – johnnyutah Feb 19 '15 at 23:11
  • @johnnyutah The latter was the aim. This seems to have been a typo on my end, sorry. – Michael Zaporozhets Feb 21 '15 at 04:38
  • The example results in a stackoverflow, you may want to remove the function call of `pageScroll` and instead pass it directly to `setTimeout` without invoking – akst Dec 02 '15 at 01:22
  • How to add mouse in and out functionality for this? – Durga Jan 17 '19 at 02:48
  • 1
    scrollBy supports a 'behavior' dict that can set scrolling to `smooth` or `auto`: https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions/behavior – user136036 Jun 09 '20 at 13:10
  • A ~40ms timeout should suffice since that creates 24 frames per second which is enough for a "smooth" scroll effect. – Saunved Mutalik Sep 07 '20 at 09:15
13

Try to use jQuery, and this code:

$(document).ready(function(){
     $('body,html').animate({scrollTop: 156}, 800); 
});

156 - position scroll to (px), from top of page.
800 - scroll duration (ms)

TheChilliPL
  • 337
  • 1
  • 5
  • 14
Antonix
  • 215
  • 2
  • 10
1

you can use jfunc function to do this. use jFunc_ScrollPageDown and jFunc_ScrollPageUp function. http://jfunc.com/jFunc-Functions.aspx.

alessandrio
  • 4,282
  • 2
  • 29
  • 40
Dany Maor
  • 31
  • 6
1

You might want to look at the source code for the jQuery ScrollTo plug-in, which scrolls smoothly. Or maybe even just use the plug-in instead of rolling you own function.

Klaus Byskov Pedersen
  • 117,245
  • 29
  • 183
  • 222
1

Smoothly running animations depends on the clients machine. No matter how fairly you code, you will never be satisfied the way your animation runs on a 128 MB Ram system.

Here is how you can scroll using jQuery:

$(document).scrollTop("50");

You might also want to try out AutoScroll Plugin.

Starx
  • 77,474
  • 47
  • 185
  • 261
0

the numbers are hardcoded, but the idea is to move item by item (and header is 52px) and when is down, go back

let elem = document.querySelector(".spfxBirthdaysSpSearch_c7d8290b ");
let lastScrollValue = 0
let double_lastScrollValue = 0
let scrollOptions = { top: 79, left: 0, behavior: 'smooth' }
let l = console.log.bind(console)

let intScroll = window.setInterval(function() {
    double_lastScrollValue = lastScrollValue //last
    lastScrollValue = elem.scrollTop // after a scroll, this is current
    if (double_lastScrollValue > 0 && double_lastScrollValue == lastScrollValue){
        elem.scrollBy({ top: elem.scrollHeight * -1, left: 0, behavior: 'smooth' });
    } else {
        if (elem.scrollTop == 0){
            elem.scrollBy({ top: 52, left: 0, behavior: 'smooth' });
        } else {
            elem.scrollBy(scrollOptions);
        }
    }
}, 1000);
bresleveloper
  • 5,940
  • 3
  • 33
  • 47
0

Here's another take on this, using requestAnimationFrame. It gives you control of the scroll time, and supports easing functions. It's pretty robust, but fair warning: there's no way for the user to interrupt the scroll.

// Easing function takes an number in range [0...1]
// and returns an eased number in that same range.
// See https://easings.net/ for more.
function easeInOutSine(x) { return -(Math.cos(Math.PI * x) - 1) / 2; }

// Simply scrolls the element from the top to the bottom.
// `elem` is the element to scroll
// `time` is the time in milliseconds to take.
// `easing` is an optional easing function.
function scrollToBottom(elem, time, easing)
{
  var startTime = null;
  var startScroll = elem.scrollTop;
  // You can change the following to scroll to a different position.
  var targetScroll = elem.scrollHeight - elem.clientHeight;
  var scrollDist = targetScroll - startScroll;
  
  easing = easing || (x => x);
  function scrollFunc(t)
  {
    if (startTime === null) startTime = t;
    
    var frac = (t - startTime) / time;
    if (frac > 1) frac = 1;
    
    elem.scrollTop = startScroll + Math.ceil(scrollDist * easing(frac));
    
    if (frac < 0.99999)
      requestAnimationFrame(scrollFunc);
  }
  requestAnimationFrame(scrollFunc);
}

// Do the scroll
scrollToBottom(document.getElementById("data"), 10000, easeInOutSine);
jpfx1342
  • 868
  • 8
  • 14
0

Since you've tagged the question as 'jquery', why don't you try something like .animate()? This particular jquery function is designed to smoothly animate all sorts of properties, including numeric CSS properties as well as scroll position.

tdammers
  • 20,353
  • 1
  • 39
  • 56