CODEWITHSUNDEEP
jqueryjquery-pluginsscroll
stefmikhail
stefmikhail

Reputation: 7145

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 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.

Upvotes: 4

Views: 2522

Answers (5)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196187

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/

Upvotes: 1

Chris Pratt
Chris Pratt

Reputation: 239380

No plugin necessary:

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

Other direction would just be negative height:

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

Upvotes: 0

Johnny Craig
Johnny Craig

Reputation: 5000

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

});

Upvotes: 0

Senad Meškin
Senad Meškin

Reputation: 13756

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

Upvotes: 2

pimvdb
pimvdb

Reputation: 154898

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/

Upvotes: 0

Related Questions