Как-то так
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<style type="text/css">
.slide { height: 100vh; background: red; border-top: 1px solid blue; }
.footer { height: 300px; background: orange; }
#btn { position: fixed; top:0; z-index: 3; left:50%;
transform: translateX(-50%); width: 50px; height: 50px; }
</style>
</head>
<body>
<button style="display: block;" id="btn">X</button>
<div class="row">
<div class="slide"> 1 slide </div>
<div class="slide"> 2 slide </div>
<div class="slide"> 3 slide </div>
<div class="slide"> 4 slide </div>
<div class="slide"> 5 slide </div>
<div class="slide footer"> footer </div>
</div>
<script type="text/javascript">
"use strict";
let page = {
pageYOffset: 0
};
let coordsElements = Array.from(document.querySelectorAll(".slide"), (item) => item.getBoundingClientRect());
let elementsLength = coordsElements.length;
let height = coordsElements[0].height;
let btn = document.getElementById("btn");
window.addEventListener("scroll", () => {
let Y = window.pageYOffset;
if (page.pageYOffset > window.pageYOffset) {
page.pageYOffset = window.pageYOffset;
for (let i = elementsLength; i >= 1; i--) {
if (Y < height * i && Y > height * (i-1)) {
if (btn.style.display !== "block") btn.style.display = "block";
return window.scrollTo({ top: height * (i-1), behavior: "auto" });
}
}
} else {
page.pageYOffset = window.pageYOffset;
for (let i = 1; i <= elementsLength; i++) {
if (Y > height * (i-1) && height * i > Y) {
if (Y > height * (elementsLength - 2) && btn.style.display !== "none") {
btn.style.display = "none";
}
return window.scrollTo({ top: height * i, behavior: "auto" });
}
}
}
});
</script>
</body>
</html>
