jQuery/Javascript code repetition

Question

I am trying to use the scrollTop function for my program, but I am finding that I am writing a lot of repetitive code.

This is an example:

<div id="table_contents >
    <ul>
        <li id="one"> title One </li>
        <li id="two"> title Two </li>
    </ul>
</div>


<div id="content">
    <p id="target_one"> I am content one </p>

    <p id="target_two"> I am content two </p>
</div>

If i was to click on 'title One' I want to scroll to 'I am content one' Likewise for title two and content two.

This is easy enough to do with jQuery/JS

$("#one").click(function() {
        $('html, body').animate({
            scrollTop: $("#target_one").offset().top -20
        }, 800);
    });

But say for example my table of contents has 15 elements in it, and I want to make each clickable to scroll to its content. For this I would have to repeat the above code 15 times for each element.

Is there a better way than that?

from all the answers below, everyone is using $(this).attr() What does this do? — jean
– jean, Commented Aug 22, 2014 at 16:51
$(this).attr() or $(this).prop() returns or sets the attribute of the element. Read here : api.jquery.com/prop and api.jquery.com/attr — hityagi
– hityagi, Commented Aug 22, 2014 at 16:54

hityagi · Accepted Answer · 2014-08-22 16:57:58Z

5

Just change your script to :

Method 1

$("#table_contents").on("click","li",function() {
        $('html, body').animate({
            scrollTop: $("#target_"+$(this).prop('id')).offset().top -20
        }, 800);
    });

In this method, the id of the clicked element will be appended to "target_", to locate the "target id". This method will work even for the dynamically added li elements.

Method 2 : Without ids [but same order]:

$("#table_contents").on("click","li",function() {
        $('html, body').animate({
            scrollTop: $("#content p").eq($(this).index()).offset().top -20
        }, 800);
    });

in this method, the index of the element li is mapped to the index of the p elements to locate the scroll location.

And done!!

http://jsfiddle.net/bmL0o9ez/

http://jsfiddle.net/bmL0o9ez/2/

edited Aug 22, 2014 at 16:57

answered Aug 22, 2014 at 16:45

hityagi

5,2561 gold badge26 silver badges44 bronze badges

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

2 Comments

j08691 Over a year ago

Still requires managing unique IDs for the list elements and targets.

hityagi Over a year ago

@JeanFerreira it appends the id of the clicked element to "target_"

Anonymous · Accepted Answer · 2014-08-22 16:46:32Z

1

LIVE FIDDLE DEMO

$("#table_contents ul li").click(function () {

    var theIdAttr = $(this).attr("id");

    $("html, body").animate({
        scrollTop: $("#target_" + theIdAttr).offset().top -20
    });

});

answered Aug 22, 2014 at 16:46

Anonymous

255 bronze badges

Comments

Andrew Walters · Accepted Answer · 2014-08-22 16:46:57Z

1

You can use a more generic selector for type sort of thing where each element requires identical behavior.

$("#table_contents li").click(function() {
        var liElement = $(this);
        $('html, body').animate({
            scrollTop: $("#target_" + liElement.attr('id')).offset().top -20
        }, 800);
    });

answered Aug 22, 2014 at 16:46

Andrew Walters

4,8036 gold badges37 silver badges49 bronze badges

Comments

ps2goat · Accepted Answer · 2014-08-22 16:47:04Z

1

You can build the id of the paragraph dynamically based on the id of the li.

HTML

title One title Two

<div id="content">
    <p id="target_one"> I am content one </p>

    <p id="target_two"> I am content two </p>
</div>

Javascript:

$("#table_contents li").click(function() {
    $('html, body').animate({
        scrollTop: $('#target_' + $(this).attr('id')).offset().top -20
    }, 800);
 });

answered Aug 22, 2014 at 16:47

ps2goat

8,5251 gold badge39 silver badges74 bronze badges

Comments

j08691 · Accepted Answer · 2014-08-22 16:50:17Z

1

Here's a solution that doesn't rely on using IDs at all, but instead uses jQuery's index() function:

$("#table_contents li").click(function () {
    $('html, body').animate({
        scrollTop: $("p").eq($(this).index()).offset().top - 20
    }, 800);
});

jsFiddle example

answered Aug 22, 2014 at 16:50

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

Fonzy · Accepted Answer · 2014-08-22 16:54:09Z

1

Make it generic, like:

$("#table_contents ul li").click(function() {
        $('html, body').animate({
            scrollTop: $('#target_'+ $(this).attr("id")).getId.offset().top -20
        }, 800);
    });

if you keep the content in order you could even go ultra generic, like:

$("#table_contents ul li").click(function() {
        var index = $(this).index();
        $('html, body').animate({
            scrollTop: $('#content:nth-child('+index+')').getId.offset().top -20
        }, 800);
    });

Not tested, but it should give you an idea

cheer mate

edited Aug 22, 2014 at 16:54

answered Aug 22, 2014 at 16:47

Fonzy

6913 silver badges14 bronze badges

Comments

user32342534 · Accepted Answer · 2014-08-22 16:43:12Z

-1

I do

$("#content p").each(function() {
    var heights = [];
    heights.push($(this).offset().top);
});

Then do

heights[your_target_as_index];

Done?

answered Aug 22, 2014 at 16:43

user32342534

1456 bronze badges

Collectives™ on Stack Overflow

jQuery/Javascript code repetition

7 Answers 7

2 Comments

LIVE FIDDLE DEMO

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related