LI ScrollTo plugin, semi working but not scrolling

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?

The code is as follows:

HTML


<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


#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; }&#8203;

jQuery


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();
    });
});&#8203;

Thank you.

$('entries').scrollTo(element, 800, {
	margin: true
});

do an alert (or console.log ) of $(‘entries’).length, it should return “0”. You need to add a dot before the word “entries”:

$('.entries').scrollTo(element, 800, {
	margin: true
});

Not sure if that fixes your problem, but that’s definately a bug.

Thank you, good spot! Have amended, but it still doesn’t scroll unfortunately L(

Ok, got a question: Do you want the body to scroll or the ul to scroll to a certain item?

  1. Body? Change “$(‘.entries’).scrollTo” to “$(‘body’).scrollTo”
  2. ul? Put a height and an overflow hidden on your .entries ul

Hi Denk,

I would like the UL to scroll… I made the changes you suggested, but it still won’t scroll for me. Did I do this incorrectly?

I don’t see the changes in that fiddle: See here: http://jsfiddle.net/Beggy/22/
I’ve added: “#fscroller ul.entries { height:50px; overflow:hidden; }”, if you click on “next” now, you’ll see the ul scroll

That,sir… is a thing of beauty!

Thank you so much for your help :slight_smile:

yw amigo and good luck with your project! :slight_smile: