Hi All,

I am trying to set a panel with a fixed height containing a series of LI elements.

I wanted to create buttons that would scroll down the LIs with three separate buttons top and bottom. First button moves down one LI, the second jumps down 3 LIs and the third button moves directly to the bottom.

This would be the same for the top buttons but in reverse. I have set this up in a jsfiddle, for now just with the move up and down one LI using the scrollTo plugin, but the scroll isn't working.

Would anybody please be able to take a look and point me in the right direction?
http://jsfiddle.net/Beggy/1/

The code is as follows:

HTML
Code:
<div id="fscroller">
    <div class="preview_module">    
        <div class="controls_top">
            <a id="up" href="#">Move Up</a>
        </div><!--/ controls_top-->

        <div class="entries_list">
            <ul class="entries">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
                <li><a href="#">Four</a></li>
                <li><a href="#">Five</a></li>
                <li><a href="#">Six</a></li>
                <li><a href="#">Seven</a></li>
                <li><a href="#">Eight</a></li>
                <li><a href="#">Nine</a></li>
                <li><a href="#">Ten</a></li>
            </ul><!--/ entries-->
        </div><!--/ entries_list-->

        <div class="controls_bottom">
            <a id="down" href="#">Move Down</a>
        </div><!--/ controls_bottom-->

    </div><!--/ preview_module-->
</div>
CSS
Code:
#fscroller .preview_module { height:313px; margin-left:-9px; width:288px; }
#fscroller .preview_module h3 { display:inline; float:left; font-size:12px; font-weight:bold; height:42px; line-height:47px; padding:0 15px; }

.controls_top, .controls_bottom { display:inline; float:right; margin:11px 15px 0 0; }
.controls_bottom { margin:7px 15px 0 0; }
.controls_top a, .controls_bottom a { display:block; float:left; }

#fscroller .entries_list { clear:both; height:230px; overflow:hidden; }
#fscroller ul.entries {  }
#fscroller ul.entries li { background:url(/community/images/forum_scroll_module/green_quot.png) no-repeat 5px center; border-top:1px solid #e0e0e0; margin:0 10px; padding:10px 0 10px 35px; }
#fscroller ul.entries li:first-child { border:none; }
#fscroller ul.entries li a { color:#005173; font-weight:normal; }​
jQuery
Code:
function scrollToPosition(element) {
    if (element !== undefined) {
        $('entries').scrollTo(element, 800, {
            margin: true
        });
    }
}
// End Club Forum Scroll Module, SB 11/2012
$(function() {
    //Create an Array of posts
    var posts = $('ul.entries li');
    var position = 0; //Start Position
    var next = $('div#fscroller #down');
    var prev = $('div#fscroller #up').hide();

    //Better performance to use Id selectors than class selectors
    next.click(function(evt) {
        //Scroll to next position
        prev.show();
        scrollToPosition(posts[position += 1]);
        if (position === posts.length - 1) {
            next.hide();
        }
        evt.preventDefault();
    });
    prev.click(function(evt) {
        //Scroll to prev position    
        next.show();
        scrollToPosition(posts[position -= 1]);
        if (position === 0) {
            prev.hide();
        }
        evt.preventDefault();
    });
});​
Thank you.