列表视图分页:滚动到顶部

Yii ListView Pagination: Scroll to Top

本文关键字：顶部 滚动 视图 分页 列表      更新时间：2023-09-26

我目前在一长串项目上使用zii.widgets.CBaseListView。该列表足够长，可以使页面滚动。

当我使用列表底部的Yii分页器转到第2页时，浏览器窗口保持其滚动位置，而不是跳转到下一个列表的顶部。

谁有简单的解决这个问题的方法?我已经在这个项目的许多地方实现了这一点。

这是Alex Kliuchnikau的增强解决方案。我还在包括ClistView小部件之前创建了一个锚，然后在ClistView设置中我使用了'afterAjaxUpdate'属性。

<a id="scrollTop"></a>
<?php 
$this->widget('zii.widgets.CListView', array(
    'dataProvider'=>$dataProvider,
    'afterAjaxUpdate' => 'function(){
$("html, body").animate({scrollTop: $("#scrollTop").position().top }, 100);}'
));
?>

在CListView属性中设置'ajaxUpdate' => false

这就是我如何使用JQuery滚动到顶部的方法。

我用id=scrollTopPosition在页面顶部创建了一个锚点。

页面将滚动到顶部用户点击(实际上，鼠标)在寻呼机(ID 'yw1'，检查Firebug) 

$('#yw1 > li').live('mouseup',function() { //mouseup to avoid conflict with request
   topoflist=$('#scrollTopPosition').position();
   thetop=topoflist.top-250;    
   $('html, body').animate({scrollTop:thetop}, 0);} 
)};

适用于所有带动画但不带锚的yiipager。滚动顶部:

$('.yiiPager > li > a').live('mouseup', function () {
    $('html, body').animate({ scrollTop: 0 }, 150);
});
相关文章：