从底部点击页面时，jquery数据表滚动到顶部 [英] jquery datatables scroll to top when pages clicked from bottom

问题描述

我正在使用一个带有底部分页的jQuery datatable。当页面从底部点击时，我希望它将其滚动到顶部，因此用户不必手动为更长的页面。我尝试使用dataTables_scrollBody，但它无法正常工作

这是我的代码：

  oTable = $（'＃tTable'）。dataTable（{
fnDrawCallback：function（o）{
 $（'dataTables_scrollBody'）。 scrollTop（0）; 
} 
}）; 
  

只有当您单击第一个/最后一个（我认为是默认行为）时，页面滚动到顶部，但不是每个页面点击。

解决方案

您应该定位 .dataTables_wrapper 并将事件附加到 .paginate_button 。这里有一个很好的小动画：

  function paginateScroll（）{
 $（' html，body'）。animate（{
 scrollTop：$（。dataTables_wrapper）。offset（）。top 
}，100）; 
 console.log（'pagination button clicked'）; // test after test 
 $（。paginate_button）。unbind（'click'，paginateScroll）; 
 $（。paginate_button）。bind（'click'，paginateScroll）; 
} 
 paginateScroll（）; 
  

查看小提琴 - > http://jsfiddle.net/EjbEJ/

I am using a jQuery datatable with bottom pagination. When the pages are clicked from bottom , I want it to scroll it to top, so users do not have to manually do that for longer pages. I tried using dataTables_scrollBody, but it doesn't work properly

Here is my code:

oTable = $('#tTable').dataTable({
    "fnDrawCallback": function(o) {
        $('dataTables_scrollBody').scrollTop(0);
     }
});

The page scrolls to top only when you click first/last (which I think is default behaviour), but not with every page click.

解决方案

You should target .dataTables_wrapper and attach the event to .paginate_button instead. Here with a nice little animation :

function paginateScroll() {
    $('html, body').animate({
       scrollTop: $(".dataTables_wrapper").offset().top
    }, 100);
    console.log('pagination button clicked'); //remove after test
    $(".paginate_button").unbind('click', paginateScroll);
    $(".paginate_button").bind('click', paginateScroll);
}
paginateScroll();

see fiddle -> http://jsfiddle.net/EjbEJ/

这篇关于从底部点击页面时，jquery数据表滚动到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！