Building a 1 page website, changing action links

In the layout.cshtml file as everyone knows there a chunk of code as below, which allows me to connect to the different pages.

But the page I’m building is a 1 page site, and so instead of the code below loading the various page, I need to use anchor links to slide the user to the section in Index.cshtml.

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>

So how do I change the above to use anchors instead

I was thinking something along this sort of line, but when you click the button its looking to move to another page, so not the right thing to do but thought I’d try and can show what Im trying to do I suppose.

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Hotel Check", "/Index#hotel", "Home")</li>
<li>@Html.ActionLink("About", "/Index#about", "Home")</li>
<li>@Html.ActionLink("Video", "/Index#video", "Home")</li>
<li>@Html.ActionLink("Pricing", "/Index#pricing", "Home")</li>
<li>@Html.ActionLink("Contact", "/Index#contact", "Home")</li>
</ul>
</div>

I tried this as well, but when you click it it still puts Home/ in front of the anchor hash

<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Hotel Check", "#hotel", "Home")</li>
<li>@Html.ActionLink("About", "#about", "Home")</li>
<li>@Html.ActionLink("Video", "#video", "Home")</li>
<li>@Html.ActionLink("Pricing", "#pricing", "Home")</li>
<li>@Html.ActionLink("Contact", "#contact", "Home")</li>

So when for example I click ‘Hotel Check’ I get - http://localhost:52438/Home/%23hotel

So then tried and that wasn’t right either

<li>@Html.ActionLink("Hotel Check", "#hotel", "")</li>

A hash-based link will refresh the page and go to the anchor. So site.com/ -> click link -> site.com#anchor.

As far as I know, if you want to click links and have your page slide down to the section with no change to URL or refreshing, you should probably be looking for a Javascript tool such as https://github.com/flesler/jquery.scrollTo
These tools exist for just about every kind of web tooling. For example here is a version of it for the Foundation CSS framework: http://foundation.zurb.com/sites/docs/smooth-scroll.html

So if you want raw Javascript, or jQuery plugin, or framework plugin, etc, they all exist. Search Github.

Right I see,

So basically there no need for the asp.net stuff using actionlink, just basically create the buttons as normal and use jscript to create the slide up and down.

This is my first web project, so was thinking I had to use the actionlink’s

Cheers

Yes to perform an in-page smooth scrolling effect on click, is a Javascript thing.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.