title: Scroll in two columns with one link
body: <p>I'm a novice and I want to scroll in two separate columns of different height with only one link.</p>
  <p>I figure it out with a simple ScrollTop function but the problem is if I click on a project title/link and then on an other one the Scroll is not right : it goes not on the good spot.</p>
  <pre><code>$(document).ready(function() {
  
    $(&quot;.projet1&quot;).click(function() {
      $(&quot;.container_droite&quot;).animate({ scrollTop: $(&quot;#projet1_txt&quot;).offset().top-90 },800 );
      $(&quot;.container_gauche&quot;).animate({ scrollTop: $(&quot;#projet1_img&quot;).offset().top-160 },800 );
    });
  
  $(&quot;.projet2&quot;).click(function() {
      $(&quot;.container_droite&quot;).animate({ scrollTop: $(&quot;#projet2_txt&quot;).offset().top-90 },800 );
      $(&quot;.container_gauche&quot;).animate({ scrollTop: $(&quot;#projet2_img&quot;).offset().top-160 },800 );
    });
  
  $(&quot;.projet3&quot;).click(function() {
      $(&quot;.container_droite&quot;).animate({ scrollTop: $(&quot;#projet3_txt&quot;).offset().top-90 },800 );
      $(&quot;.container_gauche&quot;).animate({ scrollTop: $(&quot;#projet3_img&quot;).offset().top-160 },800 );
    });
  
  $(&quot;.projet4&quot;).click(function() {
      $(&quot;.container_droite&quot;).animate({ scrollTop: $(&quot;#projet4_txt&quot;).offset().top-90 },800 );
      $(&quot;.container_gauche&quot;).animate({ scrollTop: $(&quot;#projet4_img&quot;).offset().top-160 },800 );
    });
  });
  
  </code></pre>
  <p>I know it's not very clean, but  I'm very bad with functions, so I try with what I know.
  I'm assuming I need a return something but I don't know how to do.</p>
  <p>Thank you !</p>