Argeares,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
header{
background-color: hsla(120, 100%, 20%, 1);
height: 1500px;
}
.delivered{
background-color: hsla(0, 100%, 50%, 1);
text-align: center;
font-size: 48px;
}
p{
margin: 0;
background-color: hsla(120, 100%, 20%, 1);
height: 1500px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script>
$(function() {
$(".delivered").waypoint(function() {
$("html,body").stop().animate({
scrollTop: $("#to-delivered").offset().top
}, 600)
}, {
offset: "70%"
})
});
</script>
</head>
<body>
<header>
<br>
<br>
<br>
<br>
<br>
</header>
<section class="delivered" id="to-delivered">
<br>
<br>
<br>
<br>section
<br>
<br>
<br>
</section>
<p></p>
</body>
</html>