Javascript-форум - Почему заедает scroll?

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Почему заедает scroll? (https://javascript.ru/forum/jquery/78206-pochemu-zaedaet-scroll.html)

Почему заедает scroll?

Здравствуйте, уважаемые.
Подскажите, почему заедает скролл вверх, после нажатия кнопки "Вниз"?

<head>
<style>
main, .scroll-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.scroll-btn {
  cursor: pointer;
}
.scroll-wrapper {
  width: 400px;
  height: 150px;
  margin-bottom: 5px;
  border: 1px solid #000;
  overflow: scroll;
}
.slide {
  width: 380px;
  height: 150px;
}
.one {
  background: red;
}
.two {
  background: green;
}
.three {
  background: yellow;
}
.four {
  background: blue;
}
.five {
  background: black;
}
.scroll-btn {
  width: 100px;
  height: 50px;
  border: 1px solid #000;
}
</style>
</head>
<body>
<main>
  <div class="scroll-wrapper">
    <div class="slide one"></div>
    <div class="slide two"></div>
    <div class="slide three"></div>
    <div class="slide four"></div>
    <div class="slide five"></div>
  </div>
  <div class="scroll-btn"><span>ВНИЗ</span></div>
</main>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$('.scroll-btn').click(function () {
  var slideH = $('.slide').height();
  var slidesN = $('.slide').length;
  var scroll = slideH * slidesN;
  console.log(slideH);
  console.log(slidesN);
  
  $('.scroll-wrapper').animate({ scrollTop: 10000 }, 3000);
});
</script>
</body>

Ссылка на codepen: https://codepen.io/rootsuperuser/pen/rXZYJR

Цитата:

Сообщение от DenKuzmin17

Подскажите, почему заедает скролл вверх

потому что 3 секунды не прошло.

Цитата:

Сообщение от DenKuzmin17

1.8.3.js

используйте последние версии jquery

Я думаю потому что кнопка находится за пределами окна которое скролится.
Два клика по окну и скрол работает. Наверное при первом снимается фокус с кнопки, при втором - фокус устанавливается на окно.

Потому, что не отработала анимация за указанное время.

$('.scroll-wrapper').stop().animate.....

Цитата:

Сообщение от рони

потому что 3 секунды не прошло.

Подскажите, пожалуйста, как отменить текущую анимацию при скролле окна вверх?

DenKuzmin17,

<!DOCTYPE html>

<html>
<head>
<style>
main, .scroll-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.scroll-btn {
    cursor: pointer;
}
.scroll-wrapper {
    width: 400px;
    height: 150px;
    margin-bottom: 5px;
    border: 1px solid #000;
    overflow: scroll;
}
.slide {
    width: 380px;
    height: 150px;
}
.one {
    background: red;
}
.two {
    background: green;
}
.three {
    background: yellow;
}
.four {
    background: blue;
}
.five {
    background: black;
}
.scroll-btn {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
}
</style>
</head>
<body>
<main>
    <div class="scroll-wrapper">
        <div class="slide one"></div>
        <div class="slide two"></div>
        <div class="slide three"></div>
        <div class="slide four"></div>
        <div class="slide five"></div>
    </div>
    <div class="scroll-btn"><span>ВНИЗ</span></div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('.scroll-btn').click(function () {
    var slideH = $('.slide').height();
    var slidesN = $('.slide').length;
    var scroll = slideH * slidesN;
    console.log(slideH);
    console.log(slidesN);
    $('.scroll-wrapper').animate({ scrollTop: 10000 }, 3000, function() {
});
})

$('.scroll-wrapper').on('wheel mousedown', function() {
   $(this).stop(true, false)
});
</script>
</body>

</html>

Спасибо большое!