title: How to use $(this) and closest() to form the variable passed through to jScrollPane's scrollToElement?
body: <p>I am wanting to scroll to the closest instance of a div using jScrollPane's <code>scrollToElement</code>(<a href="http://jscrollpane.kelvinluck.com/api.html" rel="nofollow noreferrer">API link</a>).  </p>
  
  <p>I was trying to use jQuery's <code>$(this)</code> and <code>closest()</code> to form the variable that would be passed through to <code>scrollToElement</code>.  </p>
  
  <p>But I think either my implementation of <code>$(this)</code> is incorrect or such a variable is not an acceptable parameter type as it's not triggering the scroll action.  </p>
  
  <p>The error message is:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'top' of undefined</p>
  </blockquote>
  
  <p>How do I use <code>$(this)</code> and <code>closest()</code> to form the variable passed through to <code>scrollToElement</code>?  </p>
  
  <p><strong>jsFiddle</strong></p>
  
  <p>Includes example of working and non-working parameters:</p>
  
  <p><a href="http://jsfiddle.net/rwone/bUbm8/" rel="nofollow noreferrer">http://jsfiddle.net/rwone/bUbm8/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="main_content"&gt;
      &lt;div class="click_me"&gt;CLICK ME&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;div&gt;test&lt;/div&gt;
      &lt;a class="target"&gt;target&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>function initScrollPane(){
      var jScrollPaneSettings = {
          hijackInternalLinks: true,
          animateScroll: true,
          animateDuration: 600,
          contentWidth: '0px'
      };
      var mainContent = $('#main_content')
      mainContent.jScrollPane(jScrollPaneSettings);
      var apiMainContent = mainContent.data('jsp');
      apiMainContent.reinitialise();
  
      $(document).on("click",".click_me", function(e) {
          e.preventDefault();  
          // DOESN"T work
          // var myVar = $(this).closest(".target");
          // DOES work
          var myVar = $(".target:first");
          //apiMainContent.scrollToElement(".target");    
          apiMainContent.scrollToElement(myVar);
      });
  }
  
  initScrollPane();
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <p>It is also my understanding that <code>closest()</code> can search <code>down</code> the tree which is why I used that particular method per the following link, but perhaps that understanding is incorrect:</p>
  
  <p><a href="https://stackoverflow.com/a/5139438/1063287">https://stackoverflow.com/a/5139438/1063287</a></p>