Jquery LocalScroll & ScrollTo - obvious mistake?

Question

I am working on a project which requires jquery scrollTo plugins from Ariel Flesler: Plugin-website

I followed the description and also did my research on stackoverflow to be sure.

The following approach is not working, even if it looks right to me.

At this point I guess I am making an obvious mistake which I dont see. I guess I need some help.

Here is the code:

In the head:

<script type="text/javascript" src="(...)/js/jquery.scrollTo-1.4.2-min.js"></script> 
<script type="text/javascript" src="(...)/js/jquery.localscroll-1.2.7-min.js"></script> 
<script type="text/javascript" src="(...)/js/jquery.serialScroll-1.2.2-min.js"</script>

The jquery:

<script type="text/javascript">
jQuery(function( $ ){

var $paneTarget = $('#container');

    $('#down').click(function(){
        $paneTarget.stop().scrollTo( {top:'+=50px',left:'+=0'}, 500 );
    });

});
</script>

The markup:

<div id="container">
 <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
</div>
<a id="down" href="#">Next item</a>

Note:

Container - 100px in height

List-Items - 50px in height each

Both have a width of 100%.

I really can't figure out where I am making a mistake here. What am I missing?

Trick question : How many scrolling plugins does it take to move a scrollbar ? — adeneo, Aug 18 '12 at 09:53

score 2 · Accepted Answer · answered Aug 18 '12 at 11:03

2

no need for a plugin imho.

$(function() {
    var y=0;
    $("#down").click(function(e){
        e.preventDefault();
        $("#container").animate({scrollTop: y+=50}, 1000);
    }) 
})

look at this fiddle: http://jsfiddle.net/flyingsausage/kU2ME/

answered Aug 18 '12 at 11:03

Dirk

1,020
8
16

Hi Dirk, thank you very much for your explanation! Worked great. To make it perfect I would like to achieve the following: After the last item is reached the button scrolles to the top again and the user can go through the list again. Now I dont want you to do my work for me. But can you give me a push in the right direction? – Arrowcatch Aug 26 '12 at 05:11
you must compare scrollTop() and css("height") of the container. if both values are equal then scroll to top again. [here is the fiddle]. hope that helps.(http://jsfiddle.net/UALpA/) – Dirk Aug 31 '12 at 07:27
Hi Dirk, wow, thanks for taking time to help me! Exactely what I was looking for. I stumbled on a problem when I have more than just 4
. Then the container scrolls to top before reaching the last item. Is there a solution for that?

Arrowcatch

Sep 07 '12 at 08:24

Jquery LocalScroll & ScrollTo - obvious mistake?

1 Answers1