Smooth scrolling effect (depends on jQuery)

smoothScroll.js

$.fn.smoothScroll = function(selector, payload) {
  // payload params
  // @ (int) payload.timerValue: Determines the max time to show the smooth animation
  // @ (jQuery Element) payload.scrollingElement: Determines the element to which the scroll is present
  payload = payload || {};

  function getScrollingElement($el) {
    return payload.scrollingElement || $el.parent();
  }
  // Delegate event
  $(selector).on('click', function(e) {
    e.preventDefault();
    var timerValue = payload.timerValue || 1000;
    var $el = $(e.currentTarget);
    var $scrollingElement = getScrollingElement($el);
    var currentScrollTop = $scrollingElement.scrollTop();
    var targetOffsetTop = $($el.attr('href')).offset().top;
    var boundOffsetTop = $scrollingElement.parent().offset().top;
    var containerScrollHeight = $scrollingElement[0].scrollHeight;
    var newScrollTop = currentScrollTop + targetOffsetTop - boundOffsetTop;

    // Animate
    $scrollingElement.animate({
        'scrollTop': newScrollTop
      },
      // Making animation similar for distance elements
      (newScrollTop / containerScrollHeight) * timerValue
    );
  })
}


// Usage
$().smoothScroll('a', {
  timerValue: 1000,
  scrollingElement: $('.container')
});