jQuery to 'Jump Down' in Scroll Area with buttons, instead of scroll bar

What I have is a div with a set width and height, which contains thumbnails. The div is set to overflow:auto to allo开发者_StackOverflow中文版w the user to scroll down to see more thumbnails.

I'm looking for a jQuery plugin (or method) which will allow for instead of a scroll bar, buttons that when pressed will animate (or not animate) to the next set of thumbnails. Kind of like the idea of 'page down' on your keyboard.

I've searched and searched but to no avail. I suspect that if such a plugin does exist, I'm not searching with the right keywords.

Hope someone can help! Thanks.

This is my method how I implementd scrolling with jQuery

Javascript

$(document).ready(function(){
    $('a.scroll').click(function()
    {
        //$(this).attr('scrollTo') is ID of element where to scroll  
        var target_offset = $("#"+$(this).attr('scrollTo')).offset();
        var target_top = target_offset.top-20;

        $('html, body').animate({scrollTop:target_top}, 500);

        return false;
    });
});

your link should look like this

<a scrollTo="id_where_to_scroll" href="#" title="Down" class="scroll">Down</a>

What you need to do is just change scrollTo while pressed, if id of first set is #firstSet then make second one #secondSet and when link is clicked just set attr('scrollTo', 'yournextset');

Set the container div to be overflow:hidden to remove the scrollbars and then just use the .animate() method to animate the scrollTop property.

scroll down

$('#gallery').animate( {scrollTop: '+=100' }, 500);

scroll up

$('#gallery').animate( {scrollTop: '-=100' }, 500);

demo at http://jsfiddle.net/gaby/dAW5w/3/

There is .scrollTo:

$('div').scrollTo($('img:eq(10)'));

This will scroll the div so that the 11th <img> element will be visible. You can pretty much extend it to your liking. You could also do:

var $div = $('div');
$div.scrollTop($div.scrollTop() + $div.height());

This will scroll down to the height that is just not visible at the current point (like Page Down).

http://jsfiddle.net/bqaQT/

I did something similar using: $('#myLink').hover(function(){ $("#myDiv").stop().animate({top: ($("#myDiv").position().top-200) + 'px'},{queue:false,duration:400});

});

No plugin necessary:

var thumbDiv = $('#thumbDiv');
thumbDiv.scrollBy(0, thumbDiv.height());

Other direction would just be negative height:

thumbDiv.scrollBy(0, -thumbDiv.height());