上下选项点击箭头html,点击上下箭头，页码发生改变(示例代码)

还是看图，channel的length为总页数，向上取整，点击上下箭头，分别向上下滚动，拒绝疯狂点击多次加载事件，细节看代码

var clickLock = false;

function calculateScrollTop (symbol) {

var limit = 8;   //一页8个channel

var itemHeight = 20;  //一个channel高20px

var currentPage = $("#home_page").text() * 1; // home_page为当前页    注： *1是直接将text值转化为数字

var allPages = Math.ceil(channelData.length / 8);  //向上取整 获取总页数

var scrollTop = $(\'#line\').scrollTop();  //获取滚动块的scrollTop值

var flag = symbol ? currentPage < allPages : currentPage > 1;    // 根据传入参数判断点击的是上箭头还是下箭头   上箭头为0 下箭头为1

if (flag) {

var changeTop = 0;

var size = (currentPage + (symbol ? 1 : -1)) * limit;

if (size > channelData.length) {

changeTop = (channelData.length - currentPage * limit) * itemHeight;

} else {

changeTop = limit * itemHeight;

}

if (changeTop != 0) {

clickLock = true;

$(\'#line\').animate({"scrollTop": symbol ? scrollTop + changeTop: scrollTop - changeTop}, 200, \'linear\', function () {clickLock = false});

$("#home_page").html($("#home_page").text() * 1 + (symbol ? 1: -1));

}

}

}

$("#triangle-down").click(function(){//点击三角箭头向下滚动一页(8个通道)

if (clickLock) return;

calculateScrollTop(true);

});

$("#triangle-up").click(function(){//点击三角箭头向上滚动一页(8个通道)

if (clickLock) return;

calculateScrollTop(false);

});