javascript - Href in <a> not working properly -

i having issues href's on web page. when page loads, check screen width, , if small enough mobile changing href of tags in header. here javascript looks like.

$(function () {     var hrefs = [$('#btn_services').attr('href'), 'http://jdcservices.ca' + '#mobileservices'];      $(window).on('resize', function () {     $('#btn_services').attr('href', function () {         return hrefs[$(window).width() > 1240 ? 0 : 1];     });     }).trigger('resize'); } 

this code changes href /services.aspx page #mobileservices div.

below header changing.

<a href="#" id="logo"></a>  <nav>      <a href="#" id="menu-icon"></a>      <ul>          <li><a id="btn_home" href="/index.aspx" class="current">home</a></li>         <li><a href="/safety.aspx">safety</a></li>         <li><a id="btn_services" href="/services.aspx">services</a></li>         <li><a href="/careers.aspx">careers</a></li>         <li><a href="/contact.aspx">contact</a></li>      </ul>  </nav>  </header> 

<div id="mobileservices"  style="width: 100%; padding-bottom: 5%;">         <div class="row" style="padding-bottom: 5%;">             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">                 <h1 style="text-align: center; font-weight: bold;">services</h1>                 <hr width="75%" />                 <p>                     based in hinton, ab , servicing hinton, edson, grande cache, , fox creek area, jd&c services has grown , adapted meet needs of clients team of highly skilled individuals.  strive perform our jobs in efficient, safe, , environmentally responsible manner exceeding expectations of our customers.                 </p>             </div>         </div>         <div class="row" style="text-align: center; height:100%; overflow: hidden;">             <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 sameheight" style="background-color: #421c4c; color:white;  vertical-align: middle; padding-top: 4%; padding-bottom: 2%;">                 <h2><i class="fa fa-truck"></i>&nbsp;&nbsp; tank truck services</h2>                 <hr width="75%"/>                 <p>                     - sour sealed tank truck services                     <br />                     - body jobs                     <br />                     - tri-tri's                     <br />                     - super b's                     <br />                     * trucks equipped gps tracking hardware.                 </p>             </div>             <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 sameheight" style="background-color: white; color:black;  vertical-align: middle; padding-top: 2%; padding-bottom: 2%;">                 <h2><i class="fa fa-database"></i>&nbsp;&nbsp;product sales</h2>                 <hr width="75%"/>                 <p>                     - kcl sales                     <br />                     - clay stabalizer                     <br />                     - hot , cold water sales                     <br />                     - kill fluid                 </p>             </div>             <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 sameheight" style="background-color: #421c4c; color:white; vertical-align: middle; padding-top: 2%; padding-bottom: 4%;">                 <h2><i class="fa fa-road"></i>&nbsp;&nbsp;portable filter units</h2>                 <hr width="75%"/>                 <p>                     portable filter units available delivery , rental. various micron filters available.                 </p>             </div>         </div>         <br />     </div> 

so can inspect inside google chrome, href changing expected, href still not take me correct div. not sure doing, maybe preventing in css?

here site working on

what can tell website you're using javascript navigate pages using ajax (with flashy animation). i'm guessing code callling preventdefault on event preventing default action, not want in case.