title: smooth scroll only scrolls to one element
body: <p>I'm new to all of this, but i'm simply trying to make my site so when you click the time of day (link) that correlates with the image, it smooth scrolls to that image. My issue is that when i do this, every link scrolls to the same image.</p>
  
  <p>Javascript</p>
  
  <pre><code>$(function(){
  $('body').css({marginTop: $('ul').height()});
  $('.scroller-link').click(function(e){
      e.preventDefault();
      id = $(this).attr('href').replace('#', '');
      $('html,body').animate({scrollTop: $("#"+id).offset().top-$(this).closest('ul').height()},'slow');
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>  &lt;Body&gt;
    &lt;ul&gt;
   &lt;a href="#1" class="scroller-link"&gt;9AM&lt;/a&gt; 
   &lt;a href="#2" class="scroller-link"&gt;11AM&lt;/a&gt;
    &lt;/ul&gt;
  
      &lt;div id="1"&gt;
      &lt;a&gt; &lt;img src="images/9am.jpg" /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="2"&gt;
      &lt;a&gt; &lt;img src="images/11am.jpg" /&gt;&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In other words, when i click the "11AM" link, it still goes to the 9AM image.</p>
  
  <p>thanks in advance!</p>