Для цикла в javascript, не выполняющего каждую команду по отдельности ( как его остановить? )

---

В моем html у меня есть Якорная ссылка в виде кнопки:

<button><a href="#content">Go To Content</a></button>

который ссылается на мой #content div. К сожалению, переход к #content div очень внезапен и резок. Поэтому я попытался анимировать его с помощью Java Script с помощью метода window.scrollTo () (и да, я хочу сделать это только с чистым java script, даже не JQuery).

Для этого я хочу разделить все движение прокрутки на более мелкие части; чтобы каждая из них занимала немного больше времени, чем предыдущая, чтобы достичь той анимации, которую вы легко получаете в css.

Пока что вы найдете мой JS в коде. Код запускается по щелчку мыши в целях тестирования.

Проблема с этим заключается в цикле for в функции smoothScroll. Похоже, что цикл for выполняет команду прокрутки только один раз, а затем игнорирует ее.

Если вам нужен конкретный вопрос: работает ли функция window.scroll только один раз? Ограничена ли его скорость каким-то образом по сравнению со скоростью браузера? Должен ли быть лучший способ сделать то, что я описал выше?

Я разрабатываю этот сайт с помощью google chrome и только чистого Java-скрипта, windows 10.

Я не буду публиковать свой html-код, чтобы вопрос не стал слишком длинным. Если вы хотите, чтобы я это сделал, пожалуйста, прокомментируйте так.

РЕДАКТИРОВАТЬ:
@

Sinisa Hajnal 

в этом есть смысл. Цикл просто складывает прокрутку и выполняет ее в конце. Поэтому, если бы я запустил цикл 8 раз и прокручивал 10 пикселей каждый раз, он не делал бы этого по отдельности, а просто прокручивал бы один раз.

Кто-нибудь знает, как это остановить?

Что я уже пробовал:

function smoothScroll(){
  for (i = 0; i < 80; i+=10 ){
        sleep(10)
        window.scrollTo(0, i)
    }
 }
// here we run our function when the user clicks on the webpage
window.onclick = function(){
    smoothScroll()
}

---