title: Trouble with jquery scrollTop function
body: <p>I'm trying to follow the DRY principle by changing a bunch of repeated functions, but I'm stuck here. I want to change this scroll to function that is repeated 4 times with different <strong>classes</strong> and <strong>ids</strong> to a more generic way (I'm using <em>jQuery</em>):</p>
  
  <pre><code>  $('.empresa').click(function(event){
      $('html, body').animate({
          scrollTop: $("#empresa").offset().top
      }, 500);
      return false;
    });
    $('.nosotros').click(function(event){
      $('html, body').animate({
          scrollTop: $("#nosotros").offset().top
      }, 500);
      return false;
    });
  </code></pre>
  
  <p>the classes are elements of a navigation within a ul which looks something like this.</p>
  
  <pre><code>&lt;ul class="nav"&gt;
      &lt;li&gt;&lt;a href="index#nosotros" class="nosotros"&gt;Link to the anchor&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="index#empresa" class="empresa"&gt;Link to the anchor&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and the scroll to tags are div elements with this tags.</p>
  
  <pre><code>&lt;div class="some-random-class" id="empresa" name="empresa"&gt;
  &lt;div class="some-random-class" id="nosotros" name="nosotros"&gt;
  </code></pre>
  
  <p>I was using this new selector to grab the class of the list with the proper anchor but I'm having trouble with the scroll part of the function, I don't know to use/convert the class or name of the object extracted to an id so I can keep use it the same way I was doing before.</p>
  
  <pre><code>$('.nav li').children('a').click(function() {
      alert( $(this).attr('class') );
  });
  </code></pre>
  
  <p>hope you guys can help me!</p>