Кнопка вверх зависсает после первого ипользования?

Question

[Виталий]

Добрый день. Столкнулся с такой вот проблемой что при скролле вниз на определенном месте появляется кнопка вверх при нажатии на нее мы плавно поднимаемся вверх. Но после первого нажатия на нее скролить вниз вообще не получается. При любой попытке скролла страница начинает плавно опускаться вниз. Помоготи разобратся что не так.
Знаю что решение с использованием jquery проще и быстрее, но в конкретном случае необходимо именно решение на javascript
сам код

window.onload = function () {
 
    var font = '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">',
        style = '<style>body{position:relative;}#top{position:fixed;right:10px;bottom:15px;font-size:30px;color:#cccccc;cursor:pointer;transition-duration:.3s;transition-timing-function:ease-in;}#top:hover{color:#847a7a;-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3);transition-duration:.3s;transition-timing-function:ease-in;}</style>',
        arrow = '<i id="top" class="icon-arrow-up-circle" aria-hidden="true" style="display:none;"></i>',
        showArrow = 200,
        time = 1000;
 
    document.head.innerHTML = document.head.innerHTML + font;
    document.head.innerHTML = document.head.innerHTML + style;
    document.body.innerHTML = document.body.innerHTML + arrow;
 
    window.onscroll = function () {
        var scrolled = window.pageYOffset || document.documentElement.scrollTop;
        if(scrolled > showArrow){
            document.getElementById('top').style.display = 'block';
        }else{
            document.getElementById('top').style.display = 'none';
        }
    }
 
    function scroll() {
        scrollTo(document.body, 0, time);
    }
 
    document.getElementById('top').onclick = function () {
        scroll();
    }
 
    function scrollTo(element, top, duration) {
        var diff = top - element.scrollTop,
            time = diff / duration * 10;
 
        setTimeout(function() {
            element.scrollTop = element.scrollTop + time;
            scrollTo(element, top, duration - 10);
        }, 10);
    }
};

пример как код себя ведет можно посмотреть здесь

Answer 1

[Коля]

У тебя бесконечная рекурсия внутри setTimeout, посмотри в отладчике.
Функция scrollTo внутри себя в setTimeout запускает саму себя, та в свою очередь опять запускает саму себя внутри setTimeout. Добавь условие выхода.