从创建的项目开始创建分页编号

Question

我有从后端创建的项目，我没有确切的值，必须创建项目的分页开始数量的项目。 如果有16 itens的分页是：1 - 2 - 3 - 4

另一个问题是滚动，需要上升或下降取决于你是哪个页码。

jsfiddle

$('.pagination .page1').on('click', function(e){ 
    event.preventDefault(); 
    $('.container').animate({ 
     scrollTop: '-=185' 
    }); 
}); 

$('.pagination .page2').on('click', function(e){ 
    event.preventDefault(); 
    $('.container').animate({ 
     scrollTop: '+=185' 
    }); 
}); 

Answer 1

我创建了一个更一般的寻呼机：

$('.pagination li').on('click', function (e) { 
 
    event.preventDefault(); 
 
    var container = $(this).parent().prev(); 
 
    var pagerNum = parseInt($(this).text()) > 1 ? parseInt($(this).text()) : 0; 
 
    var scrollTo = $('.item').eq((pagerNum * pagerNum)); 
 
    $(this).parent().prev().animate({ 
 
     scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop() 
 
    }); 
 
});

.container { 
 
    background: red; 
 
    width: 300px; 
 
    height: 185px; 
 
    overflow: hidden; 
 
} 
 
.item { 
 
    width: 100%; 
 
    background: blue; 
 
    height: 40px; 
 
    margin: 5px 0; 
 
} 
 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 300px; 
 
    text-align: center; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="item">item1</div> 
 
    <div class="item">item2</div> 
 
    <div class="item">item3</div> 
 
    <div class="item">item4</div> 
 
    <div class="item">item5</div> 
 
    <div class="item">item6</div> 
 
    <div class="item">item7</div> 
 
    <div class="item">item8</div> 
 
    <div class="item">item9</div> 
 
    <div class="item">item10</div> 
 
    <div class="item">item11</div> 
 
    <div class="item">item12</div> 
 
</div> 
 
<ul class="pagination"> 
 
    <li><a href="#" class="page1">1</a> 
 

 
    </li> 
 
    <li><a href="#" class="page2">2</a> 
 

 
    </li> 
 
    <li><a href="#" class="page3">3</a> 
 

 
    </li> 
 
</ul>