Slow down onclick window.scrollBy

Question

I am looking the code for making JavaScript window.scrollBy slower, but I haven't found anything. Could some one please advise me how to animate this type of JavaScript scrolling. And no this link doesn't help me Cross browser JavaScript (not jQuery...) scroll to top animation

Here is JSFiddle

<a  onclick="window.scrollBy(0, 300)">Make me slower</a>

Possible duplicate of [Cross browser JavaScript (not jQuery...) scroll to top animation](http://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation) — Artyom Neustroev, Dec 23 '15 at 10:15
yes but the button is in the middle of the page, and i want it to scroll 300px down, without any id. — Alexandr, Dec 23 '15 at 10:21
The demo in the question uses button to execute scrolling animation code. You can take that code and put use it anywhere else in your project. — Artyom Neustroev, Dec 23 '15 at 10:31

score 1 · Accepted Answer · answered Feb 24 '17 at 18:19

Not sure this is the best way to do that but it works fine, is nice and clear:

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

Then your onclick will be like:

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

Try it here

function scrollByRate(y, rate) {
    var scrolling = Math.max( document.getElementsByTagName('html')[0].scrollTop, document.body.scrollTop);
    arguments.callee.tmp = arguments.callee.tmp || scrolling + y;
    window.scrollBy(0, (arguments.callee.tmp - scrolling) / rate);
    if(arguments.callee.tmp - scrolling > 100) setTimeout(function() { scrollByRate(y, rate); }, 10);
    else arguments.callee.tmp = undefined;      
}

p {
  height:100px;
}

<p>
  <a href="javascript:void(0);" onclick="scrollByRate(500,20)">Scrolling down slowly</a>
</p>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<p>e</p>
<p>f</p>
<p>g</p>
<p>h</p>
<p>i</p>
<p>l</p>

Read here about static var in javascript

What happens when scrolling reaches bottom of the page? Is it possible to scroll up again then? Did you try? — Yunnosch, Jan 04 '21 at 07:16
This code doesn't work in strict mode due to the use of `arguments.callee`. — Heretic Monkey, Jan 06 '21 at 02:04
if your problem is arguments.callee try in this way: `var scrollByRate = function(y, rate) { var scrolling = Math.max( document.getElementsByTagName('html')[0].scrollTop, document.body.scrollTop); scrollByRate.tmp = scrollByRate.tmp || scrolling + y; window.scrollBy(0, (scrollByRate.tmp - scrolling) / rate); if(scrollByRate.tmp - scrolling > 100) setTimeout(function() { scrollByRate(y, rate); }, 10); else scrollByRate.tmp = undefined; }` — lunix15, Jan 11 '21 at 16:14

Slow down onclick window.scrollBy

1 Answers1

Linked