title: How to move scrollbar in a jquery-jscrollpane to textarea cursor position
body: <p>I try to implement in <a href="http://jsfiddle.net/aKeg5/9/" rel="nofollow">jsfiddle</a>. When textarea expand scrollbar not move to textarea cursor.</p>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>function addJScrollPaneTo($container) {
      // use jScrollPane jquery plugin
      $container.jScrollPane({
          verticalGutter: 1,
          stickToBottom: true,
          enableKeyboardNavigation : false,
          autoReinitialise: true
      });
  }
  
  function appendTextareaTo($container) {
  
      var $textarea = $("&lt;textarea /&gt;");
  
      // set textarea attribute
      $textarea.css({'border': 'medium none'});
      $textarea.width($container.width());
  
      // use TextAreaExpander jquery plugin
      $textarea.TextAreaExpander($container.height()-1);
  
      $container.append($textarea);
  }
  
  // for padding with elem
  function appendContainer(elem) {
  
      var $container = $("&lt;div /&gt;");
  
      // set container attribute
      $container.width($(elem).width());
      $container.height($(elem).height());
  
      $(elem).append($container);
      appendTextareaTo($container);
      addJScrollPaneTo($container);
  }
  
  function setCSS(elem) {
      $(elem).css({
          'border': 'thin solid #CCCCCC',
          'padding': '1px'
      });
  }
  
  setCSS("#test");
  appendContainer("#test");
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="test" style="width: 235px; height: 50px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.jspContainer
  {
      overflow: hidden;
      position: relative;
  }
  
  .jspPane
  {
      position: absolute;
  }
  
  .jspVerticalBar
  {
      position: absolute;
      top: 0;
      right: 0;
      width: 16px;
      height: 100%;
      background: red;
  }
  
  .jspHorizontalBar
  {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 16px;
      background: red;
  }
  
  .jspVerticalBar *,
  .jspHorizontalBar *
  {
      margin: 0;
      padding: 0;
  }
  
  .jspCap
  {
      display: none;
  }
  
  .jspHorizontalBar .jspCap
  {
      float: left;
  }
  
  .jspTrack
  {
      background: #dde;
      position: relative;
  }
  
  .jspDrag
  {
      background: #bbd;
      position: relative;
      top: 0;
      left: 0;
      cursor: pointer;
  }
  
  .jspHorizontalBar .jspTrack,
  .jspHorizontalBar .jspDrag
  {
      float: left;
      height: 100%;
  }
  
  .jspArrow
  {
      background: #50506d;
      text-indent: -20000px;
      display: block;
      cursor: pointer;
  }
  
  .jspArrow.jspDisabled
  {
      cursor: default;
      background: #80808d;
  }
  
  .jspVerticalBar .jspArrow
  {
      height: 16px;
  }
  
  .jspHorizontalBar .jspArrow
  {
      width: 16px;
      float: left;
      height: 100%;
  }
  
  .jspVerticalBar .jspArrow:focus
  {
      outline: none;
  }
  
  .jspCorner
  {
      background: #eeeef4;
      float: left;
      height: 100%;
  }
  
  /* Yuk! CSS Hack for IE6 3 pixel bug :( */
  * html .jspCorner
  {
      margin: 0 -3px 0 0;
  }
  .jspVerticalBar {
      background: none;
      border-radius: 5px 5px 5px 5px;
      right: 0px;
      width: 5px;
  }
   .jspScrollable .jspHorizontalBar {
      background: none;
      bottom: 0px;
      height: 10px;
      border-radius: 5px 5px 5px 5px;
  }
  
  .jspScrollable .jspTrack {
      background: none repeat scroll 0 0 #D1D3D5;
      border-radius: 5px 5px 5px 5px;
  }
  .jspScrollable .jspDrag {
      background: none repeat scroll 0 0 #5E6063;
      border-radius: 5px 5px 5px 5px;
  }
  </code></pre>