How to make jQuery .click function more scaleable

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

I haven't used the ID for that kind of thing before but maybe you could try using title instead? And then you would just use it in the selector like $(my_title).offset().top. Hope that helps.

Answer 2

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.

Answer 3

If I understand correctly what you mean, yes you can. You have to use the hash function in javascript.

So for your markup, if you have

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

This JS will alert "#Svc" :

$('a.foo').click(function() {
     alert(this.hash);
   });

So in your example, use it to make :

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

By the way, you can use

.click(function() {}); 

as a shortcut for

.bind('click', function() {});

More details here

Answer 4

You have to find the element by Id first:

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

adding $('#element') around the href should do it, no?

Answer 5

Try this:

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

Worked for me. I adjusted the href var. Pretty sure that was it. a[ID] as a selector targets any anchors with IDs.