Issue with anchor links on homepage

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!

You can fix this issue by simple javascript code. First write a function and then set condition that if you are in home page the url will be '#about' without home page the url will be '/#about'

Everything you can handle by DOM. Select the home page as variable by DOM then set condition

if(!home){const url = '/#about'}

and don't forget to call the function into menu link.

I think this method will work. Thanks