基于jQuery的简单列表滚动

本文最后更新于：1 年前

通过点击按钮列表可以上下滚动，依赖于jQuery。在线demo：列表滚动

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

(function ($) {
    $.fn.extend({
    Scroll: function (opt, callback) {
            if (!opt) var opt = {};
            var _btnUp = $("#" + opt.up); //向上滚动按钮   
            var _btnDown = $("#" + opt.down); //向下滚动按钮   
            var height = opt.height ? parseInt(opt.height, 10) : 100; //每次滚动的行数，默认为一屏，即父容器高度
            var speed = opt.speed ? parseInt(opt.speed, 10) : 600; //卷动速度，数值越大，速度越慢（毫秒）
                    
            function up(){
                if (!$("#scrollDiv").is(":animated")) {
                    $("#scrollDiv").animate({scrollTop:$("#scrollDiv").scrollTop()-height},speed)
                }
            }
            function down(){
                if (!$("#scrollDiv").is(":animated")) {
                    $("#scrollDiv").animate({scrollTop:$("#scrollDiv").scrollTop()+height},speed)
                }
            }

            _btnUp.bind("click", down);
            _btnDown.bind("click", up);
    }
    });
})(jQuery);
$(function () {
    $("#scrollDiv").Scroll({ height: 100, speed: 800,up: "btn2", down: "btn1" });
});

使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<button id="btn1"></button>
<div id="scrollDiv">
	<ul>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
		<li>列表项一</li>
	</ul>
</div>
<button id="btn2"></button>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#scrollDiv {
    height: 300px;
    overflow: hidden;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(240,240,240,1);
    font-size: 14px;
}
ul li {
    border-bottom: 1px solid rgba(240,240,240,1);
    height: 40px;
}

如果想要列表默认滚动到某一位置可以在页面加上下面这句话：

1
2
3
<script type="text/javascript">
    $("#scrollDiv").scrollTop(615);
</script>