title: Select target of link
body: <p>I have a list of six links to on page anchors and I want to animate the scroll to them.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="nav"&gt;
  &lt;table&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;a href="#one"&gt;One&lt;/a&gt;&lt;/td&gt;
  &lt;td&gt;&lt;a href="#two"&gt;Two&lt;/a&gt;&lt;/td&gt;
  &lt;td&gt;&lt;a href="#three"&gt;Three&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;a href="#four"&gt;Four&lt;/a&gt;&lt;/td&gt;
  &lt;td&gt;&lt;a href="#five"&gt;Five&lt;/a&gt;&lt;/td&gt;
  &lt;td&gt;&lt;a href="#six"&gt;Six&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>jQuery(document).ready(function ($) {
  
  $("#nav a").click(function(){
  
  // Disable the default behaviour when a user clicks an empty anchor link.
   // (The page jumps to the top instead of // animating)
   event.preventDefault();
  
  // Animate the scrolling motion.
   $("html, body").animate({
  scrollTop:this.attr('target').offset().top
   },"slow");
  });
  
  });
  </code></pre>
  
  <p>This does not work, I get an error saying:</p>
  
  <pre><code>Uncaught TypeError: Object http://url/#one has no method 'attr' 
  </code></pre>
  
  <p>So obviously I need to rewrite this line:</p>
  
  <pre><code>scrollTop:this.attr('target').offset().top
  </code></pre>
  
  <p>But how do I select the target of the link to find the offset so I can set the scroll height?</p>
  
  <p>SOLUTION:</p>
  
  <p>Final answer was that there were a few things wrong, probably most notable was the missing $ as pointed out below.  Here is the code I settled on using:</p>
  
  <pre><code>$("#nav a").click(function(){
  
  // Disable the default behaviour when a user clicks an empty anchor link.
   // (The page jumps to the top instead of // animating)
   event.preventDefault();
  
  // Animate the scrolling motion.
   $("html, body").animate({
  scrollTop:($("[name='"+ (this.hash).replace('#', '') +"']").offset().top)
   },"slow");
  });
  </code></pre>