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 >
        <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 >
        <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!

CodePudding user response：

Answer to your 2nd question: When the user clicks "About" from a different page he will go back to the anchor point on the homepage (www.mysite.com/).

it is because you have used a # before about (/home/#about)

if i debug the flow of .home/#about route:

when user click on it

1- he is redirected to /home

2- then due to #about, it tries to finds the about section on home page and refers you to the anchor tag

try this

    <nav >
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
    </nav>

CodePudding user response：

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