An1984tonn,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#scroll{
position:absolute;
width:80px;
height: 80px;
background: #000;
left: 85%;
transition: top .8s ease-in-out;
top : 20px;
}
.red{
border: rgb(255, 0, 0) 5px solid;
border-radius: 50%;
}
body{
position: relative;
height: 3000px;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var block = document.querySelector('#scroll'),
top,
bottom = 50,
timer;
document.addEventListener('scroll', function() {
window.clearTimeout(timer);
timer = window.setTimeout(function() {
top = window.pageYOffset + document.documentElement.clientHeight - bottom - block.clientHeight;
top = window.pageYOffset < 50 ? '' : top + 'px';
block.classList.remove('red');
block.style.top = top;
},80)
block.addEventListener('transitionend', function() {
block.classList.add('red')
}, false);
});
});
</script>
</head>
<body>
<div id="scroll" class="red"></div>
</body>
</html>