Question

What I have is a div with a set width and height, which contains thumbnails. The div is set to overflow:auto to allow 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.

Answer 1

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’);