<div class="menu">
<div class="menu1" data-nav="box1">1</div>
<div class="menu2" data-nav="box2">2</div>
<div class="menu3" data-nav="box3">3</div>
</div>
<main>
<div class="hero"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="box" id="box1"><h2>1</h2></div>
<div class="box" id="box2"><h2>2</h2></div>
<div class="box" id="box3"><h2>3</h2></div>
<div class="box" id="box4"><h2>4</h2></div>
</main>
.menu {
position: fixed;
z-index: 1;
top: 0;
width: 100%;
text-align: center;
margin-top: 0.5em;
> div {
display: inline-block;
width: 3em;
border-radius:50%;
cursor: pointer;
background: #ccc;
padding: 1em 0;
height: 3em;
margin: 0px 1em;
box-sizing: border-box;
}
}
.hero {
text-align: center;
img {
margin-top: 4em;
height: 480px;
width: 100%;
object-fit: cover;
object-position: 0% 0%;
}
}
.box {
height: 400px;
&:before {
content: "";
display: block;
height: 3em;
}
}
let menu1 = document.querySelector(".menu1");
let menu2 = document.querySelector(".menu2");
let menu3 = document.querySelector(".menu3");
let menus = document.querySelectorAll(".menu div");
menus.forEach(function(el) {
let _nav=el.dataset["nav"];
//console.log(el,_nav);
el.addEventListener(
"click",
e => {
scrollTop(_nav);
},
false
);
});
function scrollTop(el) {
let box = document.getElementById(el);
box.scrollIntoView({behavior: 'smooth', block: 'start'});
//console.log(el);
}
Also see: Tab Triggers