<nav class="fix-nav">
<ul>
<li><a href="#sec1" class="smooth-scroll">Section1</a></li>
<li><a href="#sec2" class="smooth-scroll">Section2</a></li>
<li><a href="#sec3" class="smooth-scroll">Section3</a></li>
<li><a href="#sec4" class="smooth-scroll">Section4</a></li>
<li><a href="#sec5" class="smooth-scroll">Section5</a></li>
</ul>
</nav>
<section id="sec1">
<p class="text-center">Section1</p>
<div class="spacer"></div>
</section>
<section id="sec2">
<p class="text-center">Section2</p>
<div class="spacer"></div>
</section>
<section id="sec3">
<p class="text-center">Section3</p>
<div class="spacer"></div>
</section>
<section id="sec4">
<p class="text-center">Section4</p>
<div class="spacer"></div>
</section>
<section id="sec5">
<p class="text-center">Section5</p>
<div class="spacer"></div>
</section>
.fix-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #333;
}
.fix-nav ul {
display: flex;
}
.fix-nav li {
width: 20%;
}
.smooth-scroll {
display: block;
text-align: center;
padding: 12px;
color: #fff;
}
.fix-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: $color_main;
& ul {
display: flex;
}
& li {
width: 20%;
}
}
.smooth-scroll {
display: block;
text-align: center;
padding: $space_md;
color: $color_opposite;
&.is-current {
background: $color_sub;
}
}
(function() {
const scrollBtns = document.querySelectorAll('.smooth-scroll');
if(!scrollBtns) {return;}
scrollBtns.forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
const targetId = btn.getAttribute('href');
const targetEl = document.querySelector(targetId);
const rectTop = targetEl.getBoundingClientRect().top;
const offsetTop = window.pageYOffset;
const targetOffset = 60;
const top = rectTop + offsetTop - targetOffset;
window.scrollTo({
top,
behavior: 'smooth'
});
});
});
}());