Замедление onclick window.scrollBy

Question

Привет, пользователи переполнения стека, Я ищу код для создания javascript window.scrollBy slower, , но я ничего не нашел. Может кто-нибудь, пожалуйста, посоветуйте мне, как оживить этот тип прокрутки javascript. И .. нет эта ссылка не помогает мне Cross browser JavaScript (not jQuery...) scroll to top animation

Спасибо

Вот JSFiddle

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

Answer 1

Не уверен, что это лучший способ сделать это, но он отлично работает, красиво и ясно :

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

Тогда ваш OnClick будет как:

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

Попробуйте здесь

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 статическому вар в JavaScript