JohnJohn,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
html, body {
height:100%;
}
#aboutus{
background-color: #228B22;
}
#products{
background-color: #FF1493;
}
</style>
<script>
function anim(duration) {
var temp;
return function(sel) {
cancelAnimationFrame(temp);
var start = performance.now();
var from = window.pageYOffset || document.documentElement.scrollTop,
to = document.querySelector(sel).getBoundingClientRect().top;
requestAnimationFrame(function step(timestamp) {
var progress = (timestamp - start) / duration;
1 <= progress && (progress = 1);
window.scrollTo(0, from + to * progress | 0);
1 > progress && (temp = requestAnimationFrame(step))
})
}
};
var scrollMenu = anim(2000)
</script>
</head>
<body>
<div class="nav1" style= 'position:fixed;'>
<ul id="nav" onclick="event.preventDefault()">
<li><a href ="#aboutus" onclick="scrollMenu('#aboutus')"> about us </a></li>
<li><a href="#products" onclick="scrollMenu('#products')">products</a></li>
</ul>
</div>
<div id="aboutus" style="height: 100%;">First</div>
<div id='products' style="height: 100%;">Second</div>
</body>
</html>