Long code into function?

Question

This code has no errors in my page, so I'm not looking for any help there. I'm just curious if there is a shorter way to do this, there's a lot of code being repeated with just some class names being changed each time. Could I make this shorter in a function or loop of some sort? Thanks

//menu
            $('.aboutOne').click(function(){
                $.scrollTo('.basicsRow', 1000, {axis:'yx'});
                $.scrollTo('.basicsRow', 1000, {axis:'xy'});
            })
            $('.aboutTwo').click(function(){
                $.scrollTo('.storyRow', 1000, {axis:'yx'});
                $.scrollTo('.storyRow', 1000, {axis:'xy'});
            })
            $('.aboutThree').click(function(){
                $.scrollTo('.teamRow', 1000, {axis:'yx'});
                $.scrollTo('.teamRow', 1000, {axis:'xy'});
            })

            $('.aboutOne').click(function(){
                $.scrollTo('.basicsRow', 1000, {axis:'yx'});
                $.scrollTo('.basicsRow', 1000, {axis:'xy'});
            })
            $('.aboutTwo').click(function(){
                $.scrollTo('.storyRow', 1000, {axis:'yx'});
                $.scrollTo('.storyRow', 1000, {axis:'xy'});
            })
            $('.aboutThree').click(function(){
                $.scrollTo('.teamRow', 1000, {axis:'yx'});
                $.scrollTo('.teamRow', 1000, {axis:'xy'});
            })
            $('.titleOne').click(function(){
                $.scrollTo('.homeRow', 1000, {axis:'yx'});
                $.scrollTo('.homeRow', 1000, {axis:'xy'});
            })
            $('.docsOne').click(function(){
                $.scrollTo('.startRow', 1000, {axis:'yx'});
                $.scrollTo('.startRow', 1000, {axis:'xy'});
            })
            $('.docsTwo').click(function(){
                $.scrollTo('.pinpointRow', 1000, {axis:'yx'});
                $.scrollTo('.pinpointRow', 1000, {axis:'xy'});
            })
            $('.docsThree').click(function(){
                $.scrollTo('.swipeRow', 1000, {axis:'yx'});
                $.scrollTo('.swipeRow', 1000, {axis:'xy'});
            })
            $('.docsFour').click(function(){
                $.scrollTo('.restRow', 1000, {axis:'yx'});
                $.scrollTo('.restRow', 1000, {axis:'xy'});
            })
            $('.docsFive').click(function(){
                $.scrollTo('.actionRow', 1000, {axis:'yx'});
                $.scrollTo('.actionRow', 1000, {axis:'xy'});
            })
            $('.contactOne').click(function(){
                $.scrollTo('.contactRow', 1000, {axis:'yx'});
                $.scrollTo('.contactRow', 1000, {axis:'xy'});
            })
            $('.downloadOne').click(function(){
                $.scrollTo('.downloadRow', 1000, {axis:'yx'});
                $.scrollTo('.downloadRow', 1000, {axis:'xy'});
            })

I am sure if it is a typo or not, but you have the elements `.aboutX` repeated twice — Alexander, Feb 18 '13 at 19:10

Fluidbyte · Answer 1 · 2013-02-18T19:48:25.950

3

Perhaps put everything into an object, then pass to a function:

var els = {
     '.aboutTwo':'.teamRow',
     '.aboutThree':'.homeRow',
     ...
};

function menu(els){
     $.each(els, function(a,b){
         $(a).click(function(){
            $.scrollTo(b, 1000, {axis: "yx"});
            $.scrollTo(b, 1000, {axis: "yx"});
         });
     });
}

// Call it
menu(els);

Should give you the most manageability - if anything changes you just modify the els object.

NOTE: Would like to take this opportunity to point out it's suggested you use jQuery's .on() (Docs) for binding events.

edited Feb 18 '13 at 19:48

answered Feb 18 '13 at 19:13

Fluidbyte

5,162
9
47
76

This does not work for some reason. – AlexTheGoodman Feb 18 '13 at 19:35
@AlexTheGoodman, well, you can try [my answer](http://stackoverflow.com/a/14943705/417685) or [Blazemonger's answer](http://stackoverflow.com/a/14943692/417685) which both provide some interesting possibilities – Alexander Feb 18 '13 at 19:39
@Fluidbyte, `.on()` is used internally by `.click()` – Alexander Feb 18 '13 at 19:41
@AlexTheGoodman - should work now - here's a fiddle that shows an alert since I don't have your HTML - http://jsfiddle.net/fluidbyte/9LvEz/ – Fluidbyte Feb 18 '13 at 19:50

Blazemonger · Answer 2 · 2013-02-18T19:19:06.680

1

I would add data- attributes to each clickable element to specify what you want it to scroll to:

 <a class="clicktoscroll aboutOne" data-row="basicsRow">...</a>

Now you just need one event handler:

        $('.clicktoscroll').click(function(){
            var $row = $(this).data('row');
            $.scrollTo('.' + $row, 1000, {axis:'yx'});
            $.scrollTo('.' + $row, 1000, {axis:'xy'});
        })

edited Feb 18 '13 at 19:19

answered Feb 18 '13 at 19:15

Blazemonger

90,923
26
142
180

Alexander · Answer 3 · 2013-02-18T19:38:32.150

1

You can use a data-* attribute, let's say data-scroll-to, and let your elements control where you want to scroll to instead.

<button class="about" data-scroll-to=".basicsRow">Button</button>

For example,

$("[data-scroll-to]").each(function() {
    var $this = $(this), target = $this.data("scroll-to");
    $this.click(function() {
        $.scrollTo(target, 1000, { axis: 'yx' });
        $.scrollTo(target, 1000, { axis: 'xy' });
    });
});

edited Feb 18 '13 at 19:38

answered Feb 18 '13 at 19:16

Alexander

23,432
11
63
73

If you put a hyphen inside a `data` attribute, the jQuery argument should be camelCased (as of jQuery 1.6): `$(this).data("scrollTo");` – Blazemonger Feb 18 '13 at 19:17
@Blazemonger, our answers are exactly alike. Guess who post it last :| – Alexander Feb 18 '13 at 19:19
@Blazemonger, by the way, jQuery does the transformation by itself – Alexander Feb 18 '13 at 19:20

Long code into function?

3 Answers3