cocsax92,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body{
counter-reset: myCounter 0;
}
button::before {
counter-increment: myCounter 1;
content: counter(myCounter);
color: white;
background: #e0b565;
display: inline-block;
text-align: center;
margin: -5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
border-radius: 50%;
}
div{
display: inline-block;
width: 100%;
height: 500px;
background: goldenrod;
padding: 10px;
border: 1px solid red;
}
button{
width: 130px;
height: 42px;
}
</style>
</head>
<body>
<div>
<button></button>
<p></p>
</div>
<div>
<button></button>
</div>
<div>
<button></button>
</div>
<div>
<button></button>
</div>
<script>
let btn=document.querySelectorAll('button');
for (let i=0;i<btn.length;i++){
btn[i].addEventListener("click",function () {
window.scrollBy(0,500);
})
};
</script>
</body>
</html>