如何实现“返回顶部”功能？涉及IT技术。

Question

我正在使用ExtJS4，寻找一种实现“返回顶部”功能的方法。

即当用户点击“顶部”按钮时，视图应自动滚回组件的顶部。在ExtJS中，我该如何实现这个功能？

- user1722857

Answer 1

除了 rixo 的回答（这可能是滚动到绝对顶部最简单的方法）之外，我想提一下还有一个组件级别的实现（scrollBy），如果你不必滚动整个窗口，这将非常方便。

更新

我必须承认我从未使用过 scrollBy，所以如果它对你不起作用（链接的 API 应该为你提供所有信息），我建议你改用scrollTo()。这里有一个可行的JSFiddle

在面板上像这样使用它：

panel.getEl().scrollTo('Top', 0, true);
// or
panel.body.scrollTo('Top', 0, true); // this property is protected
// or 
panel.getTargetEl().scrollTo('Top', 0, true); // this method is private and may be changed

在 Treepanel 或 Gridpanel 上，可以像这样：

panel.getView().getEl().scrollTo('Top', 0, true);

- sra

---

谢谢回复...实际上我把所有的视图都放在了面板中。所以 "window.scrollTo(0,0)" 不起作用。那么在面板中如何实现呢？ - user1722857

根据您所说的，我已经编写了代码，如下所示：“panel = Ext.getCmp（'qbqnsId'）; panel.getEl（）。scrollTo（'Top'，0，true）;”，但是它不起作用。我有这个面板视图代码为“Ext.define（'Balaee.view.qb.qbqns.Qbqns'，{extend：'Ext.form.Panel'，requires：['Balaee.view.qb.qbqns.QbqnsView']，id：'qbqnsId'，alias：'widget.Qbqns'，title：'Qbqns'，autoScroll：true，items：[ {xtype：'QbqnsView'}]，buttons：[{xtype：'button'，fieldLabel：'投票'，action：'voteAction'，formBind：true，text：'提交'}]}）;”。 - user1722857

@user1722857使用 body Demo 代替 getEl() 或私有方法 getTargetEl()。 - sra

谢谢你的帮助。实际上，我按照你说的尝试了一下。我修改了我的视图为-"Ext.define('Balaee.view.qb.qbqns.Qbqns', { extend : 'Ext.form.Panel', requires : [ 'Balaee.view.qb.qbqns.QbqnsView' ], id : 'qbqnsId', alias : 'widget.Qbqns', title : 'Qbqns', autoScroll: true, items : [ { xtype : 'QbqnsView' } ], buttons : [ { xtype : 'button', fieldLabel : '投票', action : 'voteAction', name : 'vote', formBind : true, text : '提交'handler: function(btn) { btn.up('panel').body.scrollTo('Top', 0, true) }; } ] });"但是它仍然不起作用。 - user1722857

@user1722857，我稍微扩展了一下你的标签。可能会选错面板！你正在扩展一个表单，所以应该尝试调用btn.up('form')或更好的是btn.up('Qbqns')。顺便说一下，xtype的约定是小写。 - sra

Answer 2

在您的点击处理程序中使用window.scrollTo(0,0)。

- rixo