title: One page theme Bootstrap Navigation Link does not direct to another page, while it works for anchors inside the page
body: <p>I have been using a bootstrap one page theme in my ASP MVC 5 app. Since it is one page, all the navigation links points to anchors inside the page. Then I needed an additional link to direct to another page, but it does not work. When I see the source code, the href is just fine, the hover is also fine, but when clicked it does nothing. Please help me spot the problem.</p>
  
  <p>the problem is here:</p>
  
  <pre><code>&lt;li class="active"&gt;&lt;a href="/ShoppingCart"&gt;Cart (2)&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>here is the html code:</p>
  
  <pre><code>&lt;nav class="fixed-top" id="navigation" style="top: 0px; opacity: 1;"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row-fluid"&gt;
              &lt;div class="span12 center"&gt;
                  &lt;!-- LOGO --&gt;
                  &lt;a class="brand pull-left" href="./"&gt;
                      &lt;img src="/assets/images/logo.png" alt="Treble"&gt;
                  &lt;/a&gt;
                  &lt;!-- END LOGO --&gt;
                  &lt;!-- MOBILE MENU BUTTON --&gt;
                  &lt;div class="mobile-menu" data-toggle="collapse" data-target=".nav- collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;!-- END MOBILE MENU BUTTON --&gt;
                  &lt;!-- MAIN MENU --&gt;
                  &lt;ul id="main-menu" class="nav-collapse collapse"&gt;
                      &lt;li class=""&gt;&lt;a href="#page-welcome"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class=""&gt;&lt;a href="#page-product"&gt;Product&lt;/a&gt;&lt;/li&gt;
                      &lt;li class=""&gt;&lt;a href="#page-about"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#page-news"&gt;News&lt;/a&gt;&lt;/li&gt;
                      &lt;li class=""&gt;&lt;a href="#page-contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="active"&gt;&lt;a href="/ShoppingCart"&gt;Cart (2)&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;!-- END MAIN MENU --&gt;
                  &lt;!-- SOCIAL ICONS --&gt;
                  &lt;div class="social-icons pull-right" id="navRight"&gt;
                      &lt;a href="mailto:info@panairsan.com"   class="phoneNumber"&gt;info@panairsan.com&lt;/a&gt;
                      &lt;a href="tel:+62215807881" class="phoneNumber logOffPadding"&gt;+62 (21) 580 7881&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;!-- END SOCIAL ICONS --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here is the related css classes:</p>
  
  <pre><code>.fixed-top {
  position: fixed;
  top: 0px;
  opacity: 0;
  filter: alpha(opacity=0);
  }
  
  #navigation #main-menu {
  float: right;
  }
  #navigation .social-icons {
  display: none;
  }
  </code></pre>
  
  <p>I think that is all about the code, nothing else seems to be effecting the link. Please let me know if you need more code to solve this weird problem.</p>
  
  <p>I tried this one also:</p>
  
  <pre><code>&lt;a href="./ShoppingCart"&gt;
  </code></pre>
  
  <p>Adding a dot, like the logo that is able to go to home page (refresh the page), but still does not work.</p>
  
  <p>Thanks</p>
  
  <p><strong>Update</strong></p>
  
  <p>I use <strong>jquery.scrollTo</strong>. Maybe there is something with this plugin?</p>
  
  <p>The theme I use is this one:</p>
  
  <p><a href="https://wrapbootstrap.com/theme/treble-one-page-responsive-theme-WB089478D" rel="nofollow">Wrapbootsrap - Treble One Page Theme</a></p>
  
  <p><strong>UPDATE about jquery.scrollTo</strong></p>
  
  <p>I keep searching, and I am narrowing the problem to jquery.scrollTo. It seems that the plugin is preventing the page from going anywhere. Anywone here is experienced with jquery.scrollTo?</p>
  
  <p><strong>UPDATE Routing Mechanism:</strong></p>
  
  <pre><code>routes.MapRoute(
              name: "Default",
              url: "{controller}/{action}/{id}",
              defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
              namespaces: new string[] { "percobaan2.Controllers" }
          );
  </code></pre>
  
  <p><strong>IMPORTANT UPDATE</strong></p>
  
  <p>the main problem: the link is active but it does not direct to the linked page. It does not even direct to a 404 page or anything. It just does not execute the href location.</p>