One Page website hashbang navigation scrolling

Question

I planning to do SEO optimisation for my One Page Website. I have one difficult thing to do, which is scrolling feature working with hashbang. When i click on url from navigation, there is smooth scroll to section on that 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 this function i use for 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 i use default urls, but when im changing

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

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

Answer 1

You should use .htaccess or your servers equivalent to take care of the location change of #! to #, or better yet, assuming by the !# that you're using AngularJS, enable HTML5mode.