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

score 1 · Accepted Answer · answered Oct 29 '10 at 19:05

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.

answered Oct 29 '10 at 19:05

Nick Craver

623,446
136
1,297
1,155

You know, for all the JS/html I do... I never once thought to use the `hash` property of an anchor. – mway Oct 29 '10 at 19:08
@mway - It has the `#` already, so it makes a great ID selector...and degrades gracefully with JS disabled to boot, win-win :) – Nick Craver Oct 29 '10 at 19:09
I recommend using `event.preventDefault()` instead of `return false`. More about why here: http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false – mqchen Oct 29 '10 at 19:10

score 1 · Answer 2 · answered Oct 29 '10 at 19:05

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

score 0 · Answer 3 · answered Oct 29 '10 at 19:04

0

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.

answered Oct 29 '10 at 19:04

Aaron Hathaway

4,280
2
19
17

score 0 · Answer 4 · answered Oct 29 '10 at 19:07

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?

score 0 · Answer 5 · answered Oct 29 '10 at 19:13

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.

How to make jQuery .click function more scaleable

5 Answers5