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?

Answer 1

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/