<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
$(function() {
$('nav ul li').on('click', function() {
let idName = $(this).children('a').attr('href');
console.log(idName);
let pos = $(idName).position().top;
console.log(pos);
$('html, body').animate({scrollTop: pos}, 1 * 1000);
});
});
</script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
nav {
position: fixed;
background-color: antiquewhite;
}
section article {
max-width: 100%;
width: 100vw;
height: 100vh;
}
section article:nth-child(1) {
background-color: aqua;
}
section article:nth-child(2) {
background-color: rebeccapurple;
}
section article:nth-child(3) {
background-color: aquamarine;
}
section article:nth-child(4) {
background-color: royalblue;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#first">first</a></li>
<li><a href="#second">second</a></li>
<li><a href="#third">third</a></li>
<li><a href="#fourth">fourth</a></li>
</ul>
</nav>
<section>
<article id="first"></article>
<article id="second"></article>
<article id="third"></article>
<article id="fourth"></article>
</section>
</body>
</html>
