Aetae,
офигеть он же реально написал только он не работает как нужно ))))
нет плавности и кнопка вниз не работает ))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
}
section{
height: 600px;
padding: 0px 0px 0px 60px;
font-weight: bold;
}
header{
height: 600px;
}
footer{
height: 600px;
}
nav{
position: fixed;
top: 30px;
left: 8px;
right: 0px;
}
.nav_up{
height: 50px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #98FB98;
color: #fff;
font-size: 25px;
cursor: pointer;
}
.nav_down{
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
background-color: #755D9A;
color: #fff;
font-size: 24px;
cursor: pointer;
}
.not_found{
opacity: .2;
}
</style>
</head>
<body>
<nav>
<div class="nav_up">
⇑
</div>
<div class="nav_down">
⇓
</div>
</nav>
<header>
Шапка
</header>
<section>
Блок 1
</section>
<section>
Блок 2
</section>
<section>
Блок 3
</section>
<section>
Блок 4
</section>
<section>
Блок 5
</section>
<section>
Блок 6
</section>
<section>
Блок 7
</section>
<section>
Блок 8
</section>
<footer>
Подвал
</footer>
<script>
const sections = document.querySelectorAll("section");
const navUp = document.querySelector(".nav_up");
const navDown = document.querySelector(".nav_down");
function movingThroughBlocks() {
const currentSection = getCurrentSection();
// добавляем или убираем класс not_found
if (!currentSection.previousElementSibling) {
navUp.classList.add("not_found");
} else {
navUp.classList.remove("not_found");
}
if (!currentSection.nextElementSibling) {
navDown.classList.add("not_found");
} else {
navDown.classList.remove("not_found");
}
}
function getCurrentSection() {
let currentSection = sections[0];
// ищем текущий section
sections.forEach((section) => {
if (section.getBoundingClientRect().top < 0) {
currentSection = section;
}
});
return currentSection;
}
function scrollToSection(direction) {
const currentSection = getCurrentSection();
let nextSection;
if (direction === "up") {
nextSection = currentSection.previousElementSibling;
} else if (direction === "down") {
nextSection = currentSection.nextElementSibling;
}
if (nextSection) {
nextSection.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
}
// обработчики для кнопок
navUp.addEventListener("click", () => {
scrollToSection("up");
});
navDown.addEventListener("click", () => {
scrollToSection("down");
});
// обработчики для клавиш вверх и вниз
document.addEventListener("keydown", (event) => {
if (event.code === "ArrowUp") {
scrollToSection("up");
} else if (event.code === "ArrowDown") {
scrollToSection("down");
}
});
window.addEventListener("scroll", movingThroughBlocks);
</script>
</body>
</html>