Problem with scrolldown in slow manner using javascript

Question

I needed JavaScript for automatic scroll down in a smooth/slow manner. I have a form with many radio buttons which is quite similar to survey form.

I used script from the below mentioned link. This link works fine smoothly for scrolling downwards.

But problem comes when you reach the bottom of page and cannot scroll upwards.

I am not so good in JavaScript. Does anyone here has solution or fix to this?

Link to Stack Overflow thread:

Slow down onclick window.scrollBy

function scrollByRate(y, rate) 
{
  //calculate the scroll height
  var scrolling = Math.max( document.getElementsByTagName('html')[0].scrollTop, document.body.scrollTop);

  //save the old value as "static" var
  arguments.callee.tmp = arguments.callee.tmp || scrolling + y;

  //make a little scrolling step
  window.scrollBy(0, (arguments.callee.tmp - scrolling) / rate);

  //are we arrived? if no, keep going recursively, else reset the static var
  if(arguments.callee.tmp - scrolling > 100) setTimeout(function() { scrollByRate(y, rate); }, 10);
  else arguments.callee.tmp = undefined;      
}

<a href="javascript:void(0);" onclick="scrollByRate(350,20)">Scrolling down slowly</a>

You're trying to scroll past the height of the page. Pass the page's height instead of the random 1000 value. — John, Jan 06 '21 at 01:55
This code doesn't work in strict mode due to the use of `arguments.callee`. I'd just use [`window.scrollTo`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo) with options like `window.scrollTo({ top: y, behavior: 'smooth' })`. — Heretic Monkey, Jan 06 '21 at 02:06
As much as I understood of window.scrollTo({ top: y, behavior: 'smooth' }) method is to scroll "to a specific" y coordinate. My requirement is to scroll down by "20px" from current position. Do you think how to i use it to scroll down gradually by 20px or so? — fai_developer, Jan 06 '21 at 15:57
@fai_developer You're probably looking for [`window.scrollBy`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy) then. — Edric, Jan 06 '21 at 16:19
@Johan I modified the function call as per your idea to pass the page height scrollByRate(document.body.scrollHeight,20) and it went all the way to bottom of page using one click. In fact first parameter is the total pixel points one want to scroll down and second parameter is the rate of smoothness — fai_developer, Jan 06 '21 at 16:21

score 0 · Accepted Answer · answered Jan 06 '21 at 16:21

I can see your approach having a negative impact on performance. It looks like the browser will block until the target scroll destination has been reached.

My suggestion is to use what is out there for smooth scrolling already. The scrollTo method of any scrollable pane (e.g. window object but also a scrollable div for example) has a "behavior" property that you can set to "smooth", e.g.:

window.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});

Keep in mind that the compatibility at the time of writing is limited to Chrome, Firefox, Edge and Opera which means you'll have problems on Internet Explorer and Safari (so all Apple products). I myself use a polyfill to get the smooth scrolling back on my application, this one in particular: https://github.com/iamdustan/smoothscroll

Problem with scrolldown in slow manner using javascript

1 Answers1