How to implement "Go to top" functionality?

Question

I am working with ExtJS4 and looking for a way to implement "Go to top" functionality.

i.e. On the click of "top" button, the view should scroll back to the top of the component. How can I achieve this in ExtJS?

Holtz

Answer 1

In addition to rixo's answer (which would be the easiest way for scrolling to the absolute top) I want to mention that there is also a implementation on component level (scrollBy) which can be handy if you don't have to scroll the whole window.

Update

I must confess I never used scrollBy myself so if it don't work out for you (the linked API should provide you with all infomration) I recommend you to use scrollTo() instead. Here's a working JSFiddle

Use it on Panel like

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

and on a Treepanel or Gridpanel like

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

Froth

Thanx for reply...Actually i have all my views as panel. So "window.scrollTo(0,0)" is not working. So how to implement this in case of panel? – Holtz

As per you told mam, i have written code as- " panel=Ext.getCmp('qbqnsId'); panel.getEl().scrollTo('Top', 0, true);" and i have this panel view code as-"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 : 'Vote', action : 'voteAction', formBind : true, text : 'submit'}]});" But its not working. – Holtz

@Holtz Use body Demo instead of getEl() or the private method getTargetEl() – Froth

Thanx for helping me..Actually i tried as per you told. i modified my view as-"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 : 'Vote', action : 'voteAction', name : 'vote', formBind : true, text : 'submit' handler: function(btn) { btn.up('panel').body.scrollTo('Top', 0, true) }; } ] });" But still its not working. – Holtz

@Holtz I extended your tags a bit. Well might be getting the wrong panel! You are extending a form so you should try to call btn.up('form') or better btn.up('Qbqns'). btw. the convention for xtype is lowercase. – Froth

Answer 2

Use window.scrollTo(0,0) in your click handler.

Dragonfly