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>