JQuery «Перейти вниз» в области прокрутки с помощью кнопок вместо полосы прокрутки

Question

У меня есть div с установленной шириной и высотой, который содержит миниатюры.Для div установлено значение overflow: auto, чтобы пользователь мог прокрутить вниз, чтобы увидеть больше миниатюр.

Я ищу плагин (или метод) jQuery, который позволит вместо полосы прокрутки кнопкипри нажатии анимирует (или не анимирует) следующий набор миниатюр.Вроде как идея «страница вниз» на клавиатуре.

Я искал и искал, но безрезультатно.Я подозреваю, что если такой плагин существует, я не ищу правильные ключевые слова.

Надеюсь, кто-то может помочь!Спасибо.

Answer 1

Это мой метод реализации прокрутки с помощью 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;
    });
});

ваша ссылка должна выглядеть следующим образом

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

Что вам нужно сделать, это просто изменить scrollTo во время нажатия, если id первого набора равен #firstSet, затем сделать второй #secondSet, а когда нажата ссылка, просто установить attr ('scrollTo', 'yournextset');

Answer 2

Установите для контейнера div значение overflow:hidden, чтобы удалить полосы прокрутки, а затем просто используйте метод .animate() для анимации свойства scrollTop.

прокрутите вниз

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

прокрутка вверх

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

демо на http://jsfiddle.net/gaby/dAW5w/3/

Answer 3

Я сделал нечто подобное, используя: $ ( '# MyLink'). Зависать (функция () { $ ("# myDiv"). stop (). animate ({top: ($ ("# myDiv"). position (). top-200) + 'px'}, {queue: false, duration: 400}) ;

});

Answer 4

Плагин не требуется:

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

Другое направление будет просто отрицательной высотой:

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

Answer 5

Существует .scrollTo:

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

Это позволит прокрутить div так, чтобы 11-й элемент <img> был виден.Вы можете в значительной степени расширить его по своему вкусу.Вы также можете сделать:

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

Это позволит прокрутить вниз до высоты, которая просто не видна в текущей точке (например, Page Down).

http://jsfiddle.net/bqaQT/