Menu
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?
813
The scrollTo() method of the window Interface can be used to scroll to a specified location on the page. It accepts 2 parameters the x and y coordinate of the page to scroll to. Passing both the parameters as 0 will scroll the page to the topmost and leftmost point.
Next, add the top of page link using the # symbol and "top" anchor name/id as the value of the href attribute, as shown below. If you scrolled down on this page, clicking this link takes you back to the top of the page. All modern browsers understand the "#top" value.
If your CSS html element has the following overflow markup, scrollTop will not function. To allow scrollTop to scroll, modify your markup remove overflow markup from the html element and append to a body element.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
