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.
Comments
Post a Comment