JS:UX-smoothscroll.js

JS:UX-smoothscroll.js

/**
     var event = $.event,
    scrollTimeout;

    event.special.smartscroll = {
        setup: function () {
            $(this).bind("scroll", event.special.smartscroll.handler);
        },
        teardown: function () {
            $(this).unbind("scroll", event.special.smartscroll.handler);
        },
        handler: function (event, execAsap) {
            // Save the context
            var context = this,
            args = arguments;

            // set correct event type
            event.type = "smartscroll";

            if (scrollTimeout) { clearTimeout(scrollTimeout); }
            scrollTimeout = setTimeout(function () {
                $(context).trigger('smartscroll', args);
            }, execAsap === "execAsap" ? 0 : 100);
        }
    };

    $.fn.smartscroll = function (fn) {
        return fn ? this.bind("smartscroll", fn) : this.trigger("smartscroll", ["execAsap"]);
    }; 
 */

/**
 * kswedberg / jquery-smooth-scroll
 * https://github.com/kswedberg/jquery-smooth-scroll
 * Automatically make same-page links scroll smoothly 
 * features
 * 1 works like $('a').smoothScroll(),
 * 2 to exclude links: excludeWithin
 * 3 offset to target - when animated scroll
 * 4 callback - beforeScroll, afterScroll
 */

/**
 $.smoothScroll
used to scroll any element (not just document.documentElement / document.body)
Doesn't automatically fire, so you need to bind it to some other user interaction.
$('button.scrollsomething').on('click', function() {
  $.smoothScroll({
    scrollElement: $('div.scrollme'),
    scrollTarget: '#findme'
  });
  return false;
});
 */

/**
 .scrollme {
  height: 100px;
  width: 180px;
  overflow: auto;
  padding-left: 8px;
  bordr: 1px solid #999;
 }

 */

// simple one
$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');
 
  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });
 
  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }
 
});