如何实现“转到顶部”功能？

Posted 2023-02-26

【中文标题】如何实现“转到顶部”功能？

【英文标题】：How to implement "Go to top" functionality?

【发布时间】：2013-06-01 07:10:26

【问题描述】：

我正在使用 ExtJS4 并寻找一种方法来实现“转到顶部”功能。

即单击“顶部”按钮时，视图应滚动回组件的顶部。如何在 ExtJS 中实现这一点？

【参考方案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);

【讨论】：

感谢您的回复...实际上，我将所有观点都视为面板。所以“window.scrollTo(0,0)”不起作用。那么在panel的情况下如何实现呢？

按照你告诉妈妈，我写的代码是-" panel=Ext.getCmp('qbqnsId'); panel.getEl().scrollTo('Top', 0, true);"我有这个面板视图代码为-“Ext.define（'Balaee.view.qb.qbqns.Qbqns'，extend：'Ext.form.Panel'，需要：['Balaee.view.qb.qbqns.QbqnsView ']，id：'qbqnsId'，别名：'widget.Qbqns'，标题：'Qbqns'，autoScroll：true，项目：[ xtype：'QbqnsView']，按钮：[ xtype：'button'，fieldLabel ：'投票'，动作：'voteAction'，formBind：真，文本：'提交']）；”但它不起作用。

@user1722857 使用body Demo 而不是getEl() 或私有方法getTargetEl()

感谢您帮助我..实际上我按照您所说的进行了尝试。我将我的视图修改为-“Ext.define('Balaee.view.qb.qbqns.Qbqns', extend : 'Ext.form.Panel', requires : ['Balaee.view.qb.qbqns.QbqnsView'], id：'qbqnsId'，别名：'widget.Qbqns'，标题：'Qbqns'，autoScroll：true，项目：[ xtype：'QbqnsView']，按钮：[xtype：'button'，fieldLabel：'投票', action : 'voteAction', name : 'vote', formBind : true, text : 'submit' handler: function(btn) btn.up('panel').body.scrollTo('Top', 0, true ) ; ] );"但它仍然无法正常工作。

@user1722857 我扩展了你的标签。好吧，可能会得到错误的面板！您正在扩展一个表单，因此您应该尝试调用 btn.up('form') 或更好的 btn.up('Qbqns')。顺便提一句。 xtype 的约定是小写的。

【参考方案2】：

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