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>     

Answer 1

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