<div id="nav">
<a href="#sec1">Section1</a>
<a href="#sec2">Section2</a>
<a href="#sec3">Section3</a>
</div>
<div id="sec1">
This is section 1
</div>
<div id="sec2">
This is section 2
</div>
<div id="sec3">
This is section 3
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
body {
color: #222;
font: normal normal normal 1rem/1.6 Nunito Sans, Helvetica, Arial, sans-serif;
}
#nav {
position: fixed;
top: 0px;
left: 0px;
}
#nav a {
padding: 15px;
background-color: #222;
color: #fff;
margin: 2px;
cursor: pointer;
border-radius: 2px;
display: block;
}
#sec1 , #sec2, #sec3{
padding: 15px;
margin: 15px 15px 15px 100px;
border: none;
height: 1000px;
border-radius: 2px;
font-weight: 700;
}
#sec1 {
margin-top: 0;
background-color: #fe4a49;
}
#sec2 {
background-color: #2ab7ca;
}
#sec3{
background-color: #fed766;
}
$(document).ready(function() {
$("a[href*='#']:not([href='#])").click(function() {
let target = $(this).attr("href");
$('html,body').stop().animate({
scrollTop: $(target).offset().top
}, 1000);
event.preventDefault();
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.