Question

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

link

<a id="TOS" href="#Svc">What are your terms of service?</a>

and the target

<div class="tabWrapp" name="TOS" id="Svc">
<!-- /tos tabWrapp --></div>

and the jquery

$('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
   });

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

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

the issue Im having is targeting the anchor ID inside the href var and then placing that inside the pos var…thx

Answer 1

You can give all those links the same class, like this:

<a class="scrollTo" href="#Svc">What are your terms of service?</a>

Then make your function bind to that class, like this:

$('a.scrollTo').bind('click',function() {
  var pos = $(this.hash).offset().top;
  $('html,body').animate({scrollTop : pos}, 500);
  return false;
});

This binds to all the links but uses the .hash of the link you clicked on to get the scrollTop destination.