Return to index page from the contact page

Question

I have one long index page with sections and one contact page, but the problem is if you will go to the contact page and want to go back to the long index page, the navigation links are corrputed.

This is my navigation:

 <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#home" class="smoothScroll">HOME</a></li>
                            <li><a href="#about" class="smoothScroll">STUDIO</a></li>
                            <li><a href="#team" class="smoothScroll">TEAM</a></li>
                            <li><a href="#service" class="smoothScroll">SERVICES</a></li>
                            <li><a href="#work" class="smoothScroll">WORK</a></li>
                            <li><a href="#pricing" class="smoothScroll">PRICING</a></li>
                            @*<li><a href="#contact" class="smoothScroll">CONTACT</a></li>*@
                            <li>@Html.ActionLink("Contact", "Contact", "Home")
                            </li>
                        </ul>
                    </div>

so if you now go to the contact page, the url wil be:

http://localhost:53534/Home/Contact

but if you want to go from there for example to: services, you will get the url:

http://localhost:53534/Home/Contact#service - what is not the correct url, because the correct url has to be:

http://localhost:53534/#service. So without the controller name contact.

But how to manage that?

Thank you

oke, I tried, like this:

                           @Html.ActionLink( "Contact", "Contact"
                        , "Home"
                        , Request.Url.Scheme
                        , Request.Url.Host
                        , "contact"
                        , null
                        , null
                        )
                        </li>

but then again if you go from contact to other link, you will get this: http://localhost:53534/Home/Contact#pricing

I also tried this:

                           @Html.ActionLink( "Contact", "Contact"
                        , "Home"
                        , Request.Url.Scheme
                        , Request.Url.Host
                        , ""
                        , null
                        , null
                        )
                        </li>

so my full navigation looks like this:

<div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#home" class="smoothScroll">HOME</a></li>
                            <li><a href="#about" class="smoothScroll">STUDIO</a></li>
                            <li><a href="#team" class="smoothScroll">TEAM</a></li>
                            <li><a href="#service" class="smoothScroll">SERVICES</a></li>
                            <li><a href="#work" class="smoothScroll">WORK</a></li>
                            <li><a href="#pricing" class="smoothScroll">PRICING</a></li>

                            <li>

                               @Html.ActionLink( "Contact", "Contact"
                            , "Home"
                            , Request.Url.Scheme
                            , Request.Url.Host
                            , "contact"
                            , null
                            , null
                            )
                            </li>
                        </ul>
                    </div>

This is the newest:

<div class="collapse navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#home" class="smoothScroll">HOME</a></li>
                                <li><a href="#about" class="smoothScroll">STUDIO</a></li>
                                <li><a href="#team" class="smoothScroll">TEAM</a></li>
                                <li><a href="#service" class="smoothScroll">SERVICES</a></li>
                                <li><a href="#work" class="smoothScroll">WORK</a></li>
                                <li><a href="#pricing" class="smoothScroll">PRICING</a></li>

                                <li>

                                   @Html.ActionLink( "Contact", "Contact"
                                , "Home"
                                , Request.Url.Scheme
                                , Request.Url.Host
                                , "contact"
                                , null
                                , null
                                )
                                </li>
                            </ul>
                        </div>

but then the link will become:http://localhost:53534/Home/Contact#pricing. and it should be: http://localhost:53534/Home/#pricing.

Yes, ok, sorry for that, wrong post, but:

                            @Html.ActionLink("Contact", "Index"
                            , "Home"
                            , Request.Url.Scheme
                            , Request.Url.Host
                            , "contact"
                            , null
                            , null
                            )
                        </li> The contact page has to be without "#". But now this is with "#". So how to omit the "#"? I just changed the first Index to Contact, because that is just the name

Answer 1

As Stephen Muecke pointed out in his comment, you could use this overload of Html.ActionLink.

@Html.ActionLink
( "Index"
, "Index"
, "Home"
, null
, null
, "contact" // the fragment
, null
, null
);

Else you could use regular anchor (a) elements in HTML and an @Url.Action. You could use Url.Action to get to the main page and navigate further from there:

<a href="@Url.Action("Index", "Home")#some_optional_hash" />