Create a bookmark between 2 different views in MVC

Question

I have two views; Index and Giftworx. In the Index I have icons and when each is clicked it should direct user to a specific point in the GiftWorx page. I've tried the below code but it didnt work. Any help would be appreciated.

Index View:

 <div class="col-md-4 w3_agileits_features_grid">
                <div class="agileits_w3layouts_features_grid">
                    <div class="col-xs-4 agileits_w3layouts_features_gridl">
                        <div class="agile_feature_grid">
                            @*<a href="@Url.Action("GiftWorx","Home", "GiftWorxUsers")"> <i class="fa fa-gift" aria-hidden="true"></i></a>
            </div>*@
                            <a href="/Home/GiftWorx/#GiftWorxUsers"> <i class="fa fa-gift" aria-hidden="true"></i></a>
                        </div>
                    </div>
                    <div class="col-xs-8 agileits_w3layouts_features_gridr">
                        <h4>Who uses GiftWorx</h4>
                        <p>See who uses GiftWorx and more.</p>
                    </div>
                    <div class="clearfix"> </div>
                </div>
            </div>

GiftWorxView

<div class="why-convertible-box" id="GiftWorxUsers">
    <div class="container" id="GiftWorxUsers">
        <h1>Who uses GiftWorx<i class="fa fa-question-circle"></i></h1>
    </div>
</div>
<div class="hoc container clear" id="GiftWorxUsers">
    <div class="row">
        <div class="col-md-2" style="padding: 2px;">
            <div style="border: lightgrey solid thin; border-radius: 2px">
                <img class="img-responsive" style="height:auto;" src="~/Content/myTemplate/Logos/1.jpg" />
            </div>
        </div>
        <div class="col-md-2" style="padding: 2px;">
            <div style="border: lightgrey solid thin; border-radius: 2px">
                <img class="img-responsive" src="~/Content/myTemplate/Logos/17.jpg" />
            </div>
        </div>
        <div class="col-md-2" style="padding: 2px;">
            <div style="border: lightgrey solid thin; border-radius: 2px">
                <img class="img-responsive" src="~/Content/myTemplate/Logos/15.jpg" />
            </div>
        </div>

Answer 1

This is a little bit tricky but should work fine. First I declare the variable with concatenated section of your page:

@{
    var strLink = Url.Action("GiftWorxUsers", "GiftWorx") + "#GiftworxArea";
}

Then on your Index View, put this on your a href link:

<div class="agile_feature_grid">
     <a href='@strLink'> 
      <i class="fa fa-gift" aria-hidden="true">
      </i>
     Link text here
     </a>
</div>    

Make sure you have an area in your View of Giftworx which has a name in this example: Giftworx by adding this piece of code:

<a name="GiftworxArea"></a>
<div class="col-md-4 w3_agileits_features_grid">
   //Other stuffs here
</div>

Now when you click on that link, you will be directed on your page on that exact spot with a section name GiftworxArea.