Last Updated: February 25, 2016
·
425
· keykakito

Scroll to an specific element inside any element

With this simple jquery function you can scroll to an element inside another scrollable area

Format : scrollableElement.scrollTo(innerElement)

Arugments : element, [{animation and speed}, [callback]]
Coffee code:

jQuery.fn.scrollTo = (el, options, callback)->
  return unless el
  $this = $ this
  newScroll = $(el).offset().top - $this.offset().top + $this.scrollTop() - $this.height()/3
  speed = Math.abs(newScroll - $this.scrollTop())/3
  speed = 200 if speed < 200
  options ||= {}
  if options.animate
    $this.animate({scrollTop: newScroll}, options.speed || speed, callback)
  else
    $this.scrollTop(newScroll)
    callback() if callback

How it works:

Finds real position of element from scrollableElement and then calculate animation speed with the minimum of 200.

(compiled js)

jQuery.fn.scrollTo = function(el, options, callback) {
  var $this, speed, newScroll;
  if (!el) {
    return;
  }
  $this = $(this);
  newScroll = $(el).offset().top - $this.offset().top + $this.scrollTop() - $this.height() / 3;
  speed = Math.abs(newScroll - $this.scrollTop()) / 3;
  if (speed < 200) {
    speed = 200;
  }
  options || (options = {});
  if (options.animate) {
    return $this.animate({
      scrollTop: newScroll
    }, options.speed || speed, callback);
  } else {
    $this.scrollTop(newScroll);
    if (callback) {
      return callback();
    }
  }
};