jQuery Scrolling Anchors

This is a comprehensive jQuery solution to the Scrolling Anchors effect.  Typical solutions replace the browser’s native “jump-to” behaviour for local anchors with a smooth scrolling effect, but fail to replace all other functionality related to local anchors.  This solution:

• Adds the link to the history like the browser does natively
• Respects event bubbling like the browser does natively
• Handles reload, resubmit, reclick, and back/forward the way the browser does natively
• Supports external anchors like the browser does natively
• Additionally supports a class-based include/exclude structure to turn on/off the effect

Ideally, implementing this solution globally across a site should seamlessly add a scrolling anchor effect to all local anchors (technically called fragments, basically a link that contains a hash (#) target), without losing any of the browser’s other native functionality.

This code requires jQuery and the hashchange plugin.  Installing the code turns on scrolling anchors by default.  To turn the effect off, add the class “noscroll” to the target element, and to turn it on, add the class “scrollto”.

jQuery(document).ready(function($)
{
  // Scrolling anchors: Uses jQuery + hashchange
  function scrollto ( $this )
  {
    if ( ! $this.hash ) return ( "" );
    var $this_hash = $($this.hash);
    if ( ! $this_hash ) return ( "" );
    var $parent1 = $this_hash.closest ( '.noscroll' );
    if ( $parent1.length )
    {
      var $parent2 = $this_hash.closest ( '.scrollto' );
      if ( $parent2.length &&
           $parent2.html().length <= $parent1.html().length )
        $parent1 = "";
    }
    if ( ! $parent1.length &&
         ( location.hostname == $this.hostname || ! $this.hostname ) &&
         location.pathname.replace(/^\//,'') == $this.pathname.replace(/^\//,'') )
      return ( $this_hash );
    else
      return ( "" );
  }

  $(window).bind ( 'hashchange', function(e)
  {
    var $this = location, $this_hash = scrollto ( location );
    if ( $this_hash.length )
    {
      var duration = 1000;    // duration in ms
      var easing = 'swing';   // easing values: swing | linear

      $('html,body').animate( { scrollTop: $this_hash.offset().top },
                              duration, easing );
    }
  });

  if ( ! $(window).scrollTop() ) $(window).trigger ( 'hashchange' );

  $('a[href^="#"]').click ( function(e)
  {
    var $this = this, $this_hash = scrollto ( this );
    // Determine applicable cases:
    if ( ! e.isDefaultPrevented() && $this_hash.length )
    {
      e.preventDefault();

      if ( location.hash == $this.hash )
      {
        // Reclick case is special:
        $(window).trigger ( 'hashchange' );
      }
      else
      {
        // Update history without scrolling:
        var hash = $this.hash.substr(1),
            dummy = $( '' ).css({
                                  visibility: 'hidden',
                                  position: 'fixed',
                                  top: '0px'
                                })
                           .attr ( 'id', hash )
                           .prependTo ( document.body );
        $this_hash.attr ( 'id', '' );
        location.hash = $this.hash;
        dummy.remove();
        $this_hash.attr ( 'id', hash );
      }
    }
  });
});