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
}

9 Answers 9

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 ;)

8
  • 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, 2012 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 Mar 23, 2012 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, 2015 at 23:11
  • @johnnyutah The latter was the aim. This seems to have been a typo on my end, sorry. Feb 21, 2015 at 4:38
  • 1
    scrollBy supports a 'behavior' dict that can set scrolling to smooth or auto: developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions/…
    – user136036
    Jun 9, 2020 at 13:10
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)

1
  • 2
    Just a correction, 800 is the duration of the animation, not the speed
    – Dogoku
    Mar 23, 2012 at 10:43
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.

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.

1

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

1
  • jfunc.com domain is for sale Nov 20, 2021 at 20:15
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.

1
  • Maybe he meant that the solution could be written in either jQuery or pure JS.
    – Fabián
    Sep 17, 2013 at 19:22
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);
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);
0

use this to scrollSmoothToBottom

$(document).ready(function(){
  const scrollingElement = (document.scrollingElement || document.body);

  const scrollSmoothToBottom = () => {
  $(scrollingElement).animate({
  scrollTop: document.body.scrollHeight,
  }, 500);
 }
 scrollSmoothToBottom();
})

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.