Jump Link with jQuery

Jump Link with jQuery

by Adi Jaya

HTML

<article id="article">

<h1>Welcome</h1>


<a class="button" href="#two">Go to part 2</a>
<a class="button" href="#three">Go to part 3</a>


<h2 id="one">Part 1</h2>

<p>
Lorem ipsum dolor sit amet, homero nemore sit et. Laudem noluisse et usu, elit inani recusabo his et. Eos te laoreet concludaturque, ex nam invenire convenire efficiendi. Ex congue percipitur ius, ne epicuri perfecto qui. His tollit oblique sensibus in. Eum in utamur rationibus intellegebat, assueverit philosophia vim ea.</p>

<p>
Lorem ipsum dolor sit amet, homero nemore sit et. Laudem noluisse et usu, elit inani recusabo his et. Eos te laoreet concludaturque, ex nam invenire convenire efficiendi. Ex congue percipitur ius, ne epicuri perfecto qui. His tollit oblique sensibus in. Eum in utamur rationibus intellegebat, assueverit philosophia vim ea.</p>

<p>
Lorem ipsum dolor sit amet, homero nemore sit et. Laudem noluisse et usu, elit inani recusabo his et. Eos te laoreet concludaturque, ex nam invenire convenire efficiendi. Ex congue percipitur ius, ne epicuri perfecto qui. His tollit oblique sensibus in. Eum in utamur rationibus intellegebat, assueverit philosophia vim ea.</p>

<p>
Lorem ipsum dolor sit amet, homero nemore sit et. Laudem noluisse et usu, elit inani recusabo his et. Eos te laoreet concludaturque, ex nam invenire convenire efficiendi. Ex congue percipitur ius, ne epicuri perfecto qui. His tollit oblique sensibus in. Eum in utamur rationibus intellegebat, assueverit philosophia vim ea.</p>

<h2 id="two">Part 2</h2>

<p>
Lorem ipsum dolor sit amet, homero nemore sit et. Laudem noluisse et usu, elit inani recusabo his et. Eos te laoreet concludaturque, ex nam invenire convenire efficiendi. Ex congue percipitur ius, ne epicuri perfecto qui. His tollit oblique sensibus in. Eum in utamur rationibus intellegebat, assueverit philosophia vim ea.</p>

<p>
Lorem ipsum dolor sit amet, homero nemore sit et. Laudem noluisse et usu, elit inani recusabo his et. Eos te laoreet concludaturque, ex...

CSS

.button {
    color: #FFFFFF;
    background-color: #e78b90;
    opacity: 1;
    filter: alpha(opacity=100);
}

JavaScript

$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(e) {
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {

      var jumplink = $(this.hash);
      jumplink = jumplink.length ? jumplink : $('[name=' + this.hash.slice(1) + ']');
      if (jumplink.length) {
        e.preventDefault();
        $('html, body').animate({
          scrollTop: jumplink.offset().top
        }, 1000, function() {
          var $jumplink = $(jumplink);
          $jumplink.focus();
          if ($jumplink.is(":focus")) {
            return false;
          } else {
            $jumplink.focus();
          };
        });
      }
    }
});