javascript - One Page website hashbang navigation scrolling -

i planning seo optimisation 1 page website. have 1 difficult thing do, scrolling feature working hashbang. when click on url navigation, there smooth scroll section on page.

<ul class="navigation" id="menu">     <li>         <a href="#personal-profile">personal details</a>     </li>     <li>         <a href="#work-experience">experience</a>     </li>     <li>         <a href="#education">education</a>     </li>     <li>         <a href="#skills">skills</a>     </li>     <li>         <a href="#contact">contact</a>     </li> </ul> 

and function use smooth scrolling:

function handlesmoothscrolling() {      $('a[href*=#]:not([href=#])').click(function() {         if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {           var target = $(this.hash);           target = target.length ? target : $('[name=' + this.hash.slice(1) +']');             console.log(target.offset());           if (target.length) {             $('html,body').animate({               scrolltop: target.offset().top             }, 500);             return false;           }         }     }); } 

everything fine when use default urls, when im changing

<a href="#work-experience">experience</a> <a href="#!work-experience">experience</a>  

and id of section div id="!work-experience" , website not scrolling, , web browser trying load non existing url.

you should use .htaccess or servers equivalent take care of location change of #! #, or better yet, assuming !# you're using angularjs, enable html5mode.