JAVASCRIPT ONLY (без jquery) animated scrollTop в div

Question

Я пытаюсь анимировать кнопку «прокрутка вверх» для div с переполнением, установленным на auto (полосы прокрутки отображаются как переполнение, превышающее пределы div, так что это не выпуск). При нажатии кнопки я вызываю цикл for в функции javascript (не jquery). Каждое нисходящее приращение цикла for (начиная с текущей позиции element.scrollTop) заключается в постепенном возврате прокрутки до тех пор, пока element.scrollTop не станет 0. Очень простой и понятный в теории. Работает как сон в IE (очень нетипичный!), Но НЕ РАБОТАЕТ в Firefox или Chrome !!!! Все, что он делает, это JUMPS на вершине ... нет гладкой постепенной прокрутки вверх, и это то, что я хочу! Пожалуйста помоги!

JavaScript:

function scrollUp(d){ 
var s=document.getElementById(d).scrollTop; 
for (x=s; x>0; x=x-1){document.getElementById(d).scrollTop=x;} 
} 

HTML:

<div id="this_div" class="container"> 
<div id="top" class="topbutton" onClick="scrollUp('this_div');">Top</div> 
</div> 

Answer 1

вы можете использовать таймер для анимации, что

window.onload = function() { 
    document.getElementById('top').onclick = function() { 
     scrollUp('this_div'); 
    }; 
}; 

function scrollUp(d){ 
    var s = document.getElementById(d).scrollTop; 
    var scrollDistance = 10; 
    var scrollSpeed = 200; // 1000 = 1 seconds 

    var scrollAnimate = setInterval(function() { 
     if (s > 0) { 
      s -= scrollDistance; 
      document.getElementById(d).scrollTop = s; 
     } else { 
      clearInterval(scrollAnimate); 
     } 
    },scrollSpeed); 
} 

теперь вы можете управлять скоростью и расстояние прокрутки, только изменяя значение scrollDistance и scrollSpeed.