Я хочу сделать следующее.
Есть две кнопки которые плавно перемещают от блока к блоку
section вверх или вниз НО! делают они это так.
Я должен написать в условиях следующее.
Посмотри в границах какого section ты(возможно это
nav) находишься и если будет нажат вверх то поднимись к section который выше если нажат вниз то отпусти вниз к section который ниже.
Отпускается или подниматься он должен что бы
let section = document.querySelector("section")getBoundingClient Rect();
if(section.top <=0)
Так же если выше или ниже нету section то кнопки вниз или вверх должен быть присвоен класс
not_found
Ну и если такое возможно то тоже самая навигация с помощью клавиш ВНИЗ И ВВЕРХ
<!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>
let navUp = document.querySelector(".nav_up");
let navDown = document.querySelector(".nav_down");
let section = document.querySelector("section");
function moving_through_blocks() {
}
window.addEventListener("scroll", moving_through_blocks);
</script>
</body>
</html>