How to make jQuery .click function more scaleable
<p>I am having a little trouble getting this to work. I have several anchor tags on a page that use scrollTop for its animation. HTML example</p>

<p>link</p>

<pre><code>&lt;a id="TOS" href="#Svc"&gt;What are your terms of service?&lt;/a&gt;
</code></pre>

<p>and the target</p>

<pre><code>&lt;div class="tabWrapp" name="TOS" id="Svc"&gt;
&lt;!-- /tos tabWrapp --&gt;&lt;/div&gt;
</code></pre>

<p>and the jquery</p>

<pre><code>$('a#TOS').bind('click',function() {
     var pos = $('#Svc').offset().top;
     $('html,body').animate({scrollTop : pos}, 500);
     return false;  //stops navigation from adding the id to the url
   });
</code></pre>

<p>Now this gets quite bloated having 30+ of these on the same page. Could I modify the code to apply a class to the anchor and make a variable out of the url like so</p>

<pre><code>$('.foo').bind('click', function() {
var href = (this).attr('ID');
var pos = href.offset().top;
$('html,body').animate9{scrollTop : pos}, 500);
return false;
});
</code></pre>

<p>the issue Im having is targeting the anchor ID inside the href var and then placing that inside the pos var...thx</p>
