how to design navigation with scolling every thing is single page?

For your query, please look into the below jsFiddle for this.
Fiddle for this referenced from stack overflow[^]
The below method is in different context but can help for a single page application if without scrolling one wants to navigate.
You can use as is used in most of the articles in code project, when the contents are provided and you move to the heading immediately.
The process is just the play with html and identifiers.
Suppose in a single page you have HOME, ABOUT, CONTACT US links and all three contents are there on the same page oviously with the heading as Home, About & Contact Us. So, you can provide id to each like below:-

<h2 id="homeId">Home</h2>
// Content goes here..
<h2 id="aboutId">About</h2>
// Content goes here..
<h2 id="contactUsId">Contact Us</h2>
// Content goes here..

Similarly the place/menu where the link/href would be there for the Home, About & Contact Us, use the href="#id" like below:

<a href="#homeId">Home</a>
<a href="#aboutId">About</a>
<a href="#contactUsId">Contact Us</a>

This will take straight to the content on click of the menu on a single page.
Hope This helps.
Post back your queries if I anticipated your query to be wrong.
Thanks.
:)