Im having issues with the anchor links on my homepage.

I have the following menu, which works great when the user is on the homepage but when visiting another page and clicking the "About" link it doesnt goto the homepage to find the anchor.

<nav class="main-menu">
        <a href="/#about">About</a>
        <a href="/contact">Contact</a>
</nav>

If I change the menu to the following, it works great when are on other pages, but when on the homepage (the url to my homepage is www.mysite.com/ (with nothing after the /)) and clicking "About" it loads the page again before going to the anchor point.

<nav class="main-menu">
        <a href="/home#about">About</a>
        <a href="/contact">Contact</a>
</nav>

Have been looking for a solution whereby:

• When someone arrives at the homepage of my site (full url: www.mysite.com/) they can click "About" and will goto the anchor point (without refreshing the page).
• When the user clicks "About" from a different page he will go back to the anchor point on the homepage (www.mysite.com/).

Many thanks in advance!