Using jQuery plugin in WordPress post loop [closed]

Question

I'm using the scrollTo jQuery plugin on my front page so a user can scroll through featured posts w/out having to use the scroll bar. My script requires an id as an anchor for each reference point to scroll to, in this case my post titles.

My problem is I can't seem to apply an id to every post title on the front page, just the first post in the loop.

HTML/PHP:

<div id="nav-dock">
  <div class="btn"><a id="prev" href="#"><span>Prev</span></a></div>
  <div class="btn"><a id="next" href="#"><span>Next</span></a></div>
</div>

<div class="post-desc-multiple">
    <h2 class="header-wrap"><a id="scroll" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php

        if(get_post_type()=='post'){
            $the_date = get_the_time('l, F j, Y');
        }

        $comment_count = get_comments_number();
        if($comment_count >= 1 && get_post_type()=='post') {
            $comment_buffer = "&nbsp;&nbsp;&middot;&nbsp;&nbsp;";
        } else {
            $comment_buffer = "";
        }

        ?>
        <div class="post-date-multiple"><?php echo $the_date . $comment_buffer ?><a href="<?php the_permalink(); ?>#comments-block"><span><?php 
        comments_number('', '1 Comment', '% Comments') ?></span></a></div>
        <?php
        $the_excerpt = strip_shortcodes(get_the_excerpt());
        echo $the_excerpt;
    ?>
   <div class="post-more hype-btn clearfix">
        <a href="<?php the_permalink(); ?>"><span>Read More &raquo;</span></a>
    </div>
</div> 

jQuery:

$(function() {

    function scroll(direction) {

        var scroll, i,
                positions = [],
                here = $(window).scrollTop(),
                collection = $('#scroll');

        collection.each(function() {
            positions.push(parseInt($(this).offset()['top'],10));
        });

        for(i = 0; i < positions.length; i++) {
            if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
            if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
        }

        if (scroll) {
            $.scrollTo(scroll, {
                duration: 750       
            });
        }

        return false;
    }

    $("#next,#prev").click(function() {        
        return scroll($(this).attr('id'));        
    });

}); 

When I try to apply the anchor, #scroll, to <h2 class="header-wrap"><a id="scroll" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> , I am able to scroll, but no further than the first post in the loop.

It seems to me the issue is applying the same id #scroll to every post title in the loop, but I havent figured out how to do it yet.

Any help would be great, I've been at this for a few hrs and can't seem to get it.

Thanks

Answer 1

Use a class instead of an ID. A class is accessed through jQuery by using a "." instead of a "#".

P.S. This is more of a CSS question than a WordPress question.