How can I make the scroll smooth and animated with this code structure?
Check out my JSFiddle here: https://jsfiddle.net/v7qhzo8q/
The code structure is as follows:
<nav id="nav">
<ul id="top">
<li><a href="#">Home</a></li>
<li><a href="#vinedo">Viñedo</a></li>
<li><a href="#elaboracion">Elaboracion</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<div id='vinedo' class="div1">
Vinedo DIV
<a href="#top">Back to top!</a>
</div>
<div id="elaboracion" class="div2">
Elaboracion DIV
<a href="#top">Back to top!</a>
</div>
<div id="contacto" class="div3">
Contacto DIV
<a href="#top">Back to top!</a>
</div>
CSS:
.div1 {background:red;height:1000px;}
.div2 {background:green;height:1000px;}
.div3 {background:blue;height:1000px;}