Yii ListView 分页：滚动到顶部答案

【问题标题】：Yii ListView Pagination: Scroll to TopYii ListView 分页：滚动到顶部
【发布时间】：2011-12-14 11:03:24
【问题描述】：

我目前在一长串项目中使用zii.widgets.CBaseListView。该列表足够长，以至于它会导致页面滚动。

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

谁有这个问题的简单解决方案？我已经在这个项目的许多地方实施了这一点。我已经翻阅了文档，但我的结果是空的。

【问题讨论】：

【解决方案1】：

这是 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);}'

));

?>

【讨论】：

【解决方案2】：

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

【讨论】：

所以没有办法让ajax页面更新并使用Javascript或页面锚点滚动回列表顶部？这似乎是分页功能中一个相当大的可用性疏忽。

【解决方案3】：

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

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

页面将在用户点击寻呼机（实际上是 mouseup）时滚动到顶部（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);} 
)};

【讨论】：

【解决方案4】：

适用于所有有动画但没有锚的 YiiPager。只需滚动顶部：

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

【讨论】：