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

有.scrollTo：

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

这将滚动div，以便第11个<img>元素可见。您可以根据自己的喜好进行扩展。你也可以这样做：

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

这将向下滚动到当前点不可见的高度（如Page Down）。

http://jsfiddle.net/bqaQT/

Answer 4

无需插件：

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

其他方向只是负高度：

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

Answer 5

我做了类似的事情： $（ '＃myLink的'）。悬停（函数（）{ $（“＃myDiv”）。stop（）。animate（{top：（$（“＃myDiv”）。position（）。top-200）+'px'}，{queue：false，duration：400}） ;

}）;

jQuery使用按钮而不是滚动条在滚动区域中“跳转”

5 个答案: