[JavaScript][jQuery] Inline Anchor Navigation: Adds a smooth scroll effect to URLs containing a hash (#). Excludes single hashes, #respond (WordPress comment forms), and orphaned hash characters at the end of a URL.
/**
* jQuery Inline Anchor Navigation
*
* Adds a smooth scroll effect to URLs containing a hash (#).
* Excludes single hashes, #respond (WordPress comment forms), and orphaned
* hash characters at the end of a URL.
*/
(function($) {
$('a[href*="#"]')
.not('a[href="#"]') // Excemption #1: dummy hrefs
.not('a[href*="#respond"]') // Excemption #2: WordPress comment form
.on('click.achornav', function(e) {
var linktHref = this.href.split('#');
if(linktHref[1] === '') { // Excemption #3: orphaned # at end of URL
e.preventDefault();
return false;
}
var currentUrlRoot = window.location.href.split('#')[0],
scrollToAnchor = $('#' + linktHref[1]).offset().top;
// Animate for targets on the same page.
if(linktHref[0] === currentUrlRoot) {
$('html, body')
.animate({ scrollTop : scrollToAnchor }, 250 ); // Duration: 250ms.
e.preventDefault();
return false;
} else {
// For targets on other pages, just go to URL.
window.location.href = this.href;
}
return false;
});
}(jQuery));