I have a Ext.Container setup with vertical scroll and a table of contents. I've also added anchor elements for "Back to top" from anywhere within the container, as shown below.

Ext.define("abcd.xyz.view.FullDocument", {
extend: 'Ext.Container',
xtype: 'fulldocument',

config: {
xtype: 'container',
title: 'Document',
html: 'loading document...',
scrollable: { direction: 'vertical' },
element: 'element',
delegate: 'div.toc a',
tap: function(e, node, options, eOpts){
var id = Ext.fly(node).dom.parentElement.href.split('#')[1];
var targetElemTop = Ext.fly(id).dom.offsetTop;
var scroller = this.getScrollable().getScroller();
scroller.scrollTo(0, targetElemTop, true);

I don't want to use named anchors here for scrolling to elements for various reasons(majorly not changing the url) so I'm handling the scrolling on my own as above. However, once I scroll to an element on the container, I'm unable to scroll above that element. It somehow starts treating that element as page top and will refuse to scroll above that element.

Any idea what might be happening here?