How to call a jQuery function like in JavaScript

Question

I have this jQuery function:

$('.scrollToLoginBox').click(function(){
    $('html, body').animate({scrollTop: $("#LoginBox").offset().top-5}, 'slow');                
});

I don't want it as a class, I'd like to be able to call it like this: onClick="scrollTo(id);"

So, how can I put the function in JavaScript format:

function scrollTo(id){
    $('html, body').animate({scrollTop: $("#'+id+'").offset().top-5}, 'slow');
}

EDITED by publisher:

I appreciate all your answers, but I'm not trying to get the id. On the other hand, I'm trying to build the same function I published above. So, that on a click I will send the id (which I have Example Login or LoginBox), so that the function will scroll slowly to the anchor (id=Login or LoginBox).

Now I have to call it like this: class="scrollToLoginBox", instead I'd like to call it onClick="scrollTo('LoginBox');.

I have 20 identical functions like the above, one for each id. Another example of what I have and I don't want is: class="scrollToSettings", instead I'd like to call it onClick="scrollTo('LoginBox'); or onClick="scrollTo('Settings');

            $('.scrollToSettings').click(function(e){
        $('html, body').animate({scrollTop:$("#settings").offset().top-5}, 'slow');         
        return false;       
    });
    
    $('.scrollToFaqs').click(function(e){
        $('html, body').animate({scrollTop:$("#formCode").offset().top-5}, 'slow');         
        return false;       
    });

I would like only one function that takes the id. I just don't know how to pass the id to this jQuery function ;o)

Why do you want to call it with onclick? Just make that event handler more generic. — Blender
– Blender, Commented Dec 24, 2012 at 9:30
I don't hate you ;o) I appreciate all the answers, but I'm not trying to get the id. On the other hand, I'm trying to build a function. — Sebastian
– Sebastian, Commented Dec 25, 2012 at 16:03
If your issue has been solved, please accept the answer that helped you solve the issue. If none of the answers helped, please provide your own answer to assist other users who may have the same problem and accept that one. — ig0774
– ig0774, Commented Dec 26, 2012 at 10:24

Adil · Accepted Answer · 2012-12-28 04:55:06Z

8

If you want to pass id to item being clicked, then you need to use this.id

Live Demo

onClick="scrollTo(this.id);"

If you want to pass id of some other control then you simple pass the id as string.

onClick="scrollTo('idOfHTMLElement');"

Edit based on comments, for passing values from html elements to javascript function.

Data attributes are used for hold custom attributes and could be accessed in jQuery function use data() function.

Html

<div class="scrollToCal" data-idtopass="Anchor">click me to go to Anchor</div>

Javascript

jQuery(document).ready(function($) {

    $('.scrollToCal').click(function() {

        $('html, body').animate({
            scrollTop: $('#' + $(this).data('idtopass')).offset().top - 5
        }, 'slow');
        return false;
    });

});

edited Dec 28, 2012 at 4:55

answered Dec 24, 2012 at 9:29

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sebastian Over a year ago

Thanks Adil, I want this but for the jQuery function I published. I already have the id. In my example, it would be: scrollTo('Login'); So, how do I modify my funcion to accept this way of calling it?

Adil Over a year ago

Could you make a fiddle? as I could not get what you want.

Sebastian Over a year ago

Hi Adil, I used Palash code, and started eliminating the id part. I noticed, not even the Alert works. I'm in noConflict mode. this in my fiddle

Sebastian Over a year ago

and HERE is a working version with class. I have many Anchors, so here I don't know how to pass the Anchor id. Instead, I have a class for each of them, which is not good.

Adil Over a year ago

You can use data to pass values on click, check it here, jsfiddle.net/rajaadil/yY2DG/3

|

Collectives™ on Stack Overflow

How to call a jQuery function like in JavaScript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related