<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>asd</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="header__wrapper">
<a class="header__logo" href="#"></a>
<nav class="nav">
<ul class="list">
<li class="list__item"><a data-goto=".page__section-1" href="#" class="list__link"> Header 1</a></li>
<li class="list__item"><a data-goto=".page__section-2" href="#" class="list__link">Header 2</a></li>
<li class="list__item"><a data-goto=".page__section-3" href="#" class="list__link">Header 3</a></li>
<li class="list__item"><a data-goto=".page__section-4" href="#" class="list__link">Header 4</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="wrapper">
<div class="page__section page__section-1">
<h2 class="page__title">Header 1</h2>
<p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь lorem прямо однажды деревни возвращайся взобравшись города если, они образ которой? Дал, большого свой, все собрал назад заманивший! Силуэт жаренные пояс они моей бросил пор имени текста пустился предложения грамматики деревни, всемогущая заманивший агентство раз если ведущими за однажды, выйти несколько ему страна то, подпоясал предупреждал? Моей lorem, власти подпоясал маленькая речью буквенных безорфографичный дал все жаренные вдали! Большого меня предложения это щеке от всех однажды! Ты выйти эта переписали то. Единственное, они по всей свое несколько ры</p>
</div>
<div class="page__section page__section-2">
<h2 class="page__title">Header 2</h2>
<p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь lorem прямо однажды деревни возвращайся взобравшись города если, они образ которой? Дал, большого свой, все собрал назад заманивший! Силуэт жаренные пояс они моей бросил пор имени текста пустился предложения грамматики деревни, всемогущая заманивший агентство раз если ведущими за однажды, выйти несколько ему страна то, подпоясал предупреждал? Моей lorem, власти подпоясал маленькая речью буквенных безорфографичный дал все жаренные вдали! Большого меня предложения это щеке от всех однажды! Ты выйти эта переписали то. Единственное, они по всей свое несколько рыбного рыбными буквоград переписали предупреждал, пустился путь дороге, составитель рукописи последний лучше мир гор.Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь.</p>
</div>
<div class="page__section page__section-3">
<h2 class="page__title">Header 3</h2>
<p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь lorem прямо однажды деревни возвращайся взобравшись города если, они образ которой? Дал, большого свой, все собрал назад заманивший! Силуэт жаренные пояс они моей бросил пор имени текста пустился предложения грамматики деревни, всемогущая заманивший агентство раз если ведущими за однажды, выйти несколько ему страна то, подпоясал предупреждал? Моей lorem, власти подпоясал маленькая речью буквенных безорфографичный дал все жаренные вдали! Большого меня предложения это щеке от всех однажды! Ты выйти эта переписали то. Единственное, они по всей свое несколько рыбного рыбными буквоград переписали предупреждал, пустился путь дороге, составитель рукописи последний лучше мир гор.Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь lorem прям.</p>
</div>
<script src="main.js"></script>
</body>
</html>
body{
margin: 0;
margin-top: 100px;
padding: 0;
font-family: sans-serif;
}
*{
box-sizing: border-box;
}
.container{
max-width: 1000px;
margin: 0 auto;
}
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
background: gray;
padding: 15px 0;
}
.header__logo{
border-radius: 50%;
background-color: #333;
position: relative;
width: 40px;
height: 40px;
z-index: 5;
}
.header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.list{
display: flex;
list-style: none;
}
.list__item{
margin-left: 20px;
}
.list__link{
text-decoration: none;
color: inherit;
}
.page__section-1{
background: lightgreen;
}
.page__section-2{
background: lightgray;
}
.page__section-3{
background: lightblue;
}
let menuLinks = document.querySelectorAll('.list__link[data-goto]');
let header = document.querySelector('.header');
menuLinks.forEach(item => {
if(item.dataset.goto && document.querySelectorAll(item.dataset.goto).length){
let elem = document.querySelector("" + item.dataset.goto);
item.onclick = function(event) {
window.scrollTo({
top: elemCoords,
behavior: "smooth"
})
event.preventDefault();
}
}
})
Средний
