Flex 3.5 Html Scrollbar control

Below I present a way to control the HTML scrollbar in order to scroll to a specific component.
I mostly use it when I deal with long repeaters or lists. The following example takes a repeater that creates groups of components, such as textAreas and buttons and places them one after the other. So by using my method you can scroll to a specific component of that list.

//Place the JavaScript Functions in your html-Template or in your webpage directly.
//CODE BELOW:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();callJS(Application.application.height)" height="3500" width="800" verticalScrollPolicy="off" >


<mx:Script>
<![CDATA[
////////////// JS FUNCTIONS ////////////////////////////////////////

/* <script language="JavaScript" type="text/javascript">
function getSwfSize(passedHeight)
{
theDiv = document.getElementById("viewstack");
theDiv.style.height = passedHeight + 'px';
}
</script>
*/

/* <script type="text/javascript">
function scrollWindow(depth)
{
var el = document.getElementById('viewstack');
var c = el.clientHeight;
var total = depth;

window.scrollBy(0,(total));

}

</script>
*/
//////////////// END OF JAVASCRIPT ////////////////////////////////////////////

import flash.external.ExternalInterface;
import mx.controls.*;

var arr:Array=[1,2,3,4,5,6,7,8,9,10];

//Resizes the div in which the swf is inside. Pretty neat if you hate the flash scrollbar.
public function callJS(totalSwfHeight:Number):void
{
Application.application.height = 100+childComponent.height;
ExternalInterface.call("getSwfSize",(100+childComponent.height));
}

public function launchJS(str)
{
//How many pixels the scroller will move
//As the box1 is inside a repeater its id is an array that defines all the created instanses
//so we are scrolling to that instances' y value plus a bit more to fit perfectly in the screen, not just its top.
var pointer:Number = box1[Number(str)].y+20 ;
Alert.show("Moved Scroller at: "+String(pointer)+" px");
//calls the scroller JavaScript function
ExternalInterface.call("scrollWindow",pointer);
}

//Fills the array for the repeater
public function init()
{
for(var i=0;i<=30;i++)
{
arr[i]=Number(i);
}

rep.dataProvider=arr;
}

]]&gt
</mx:Script>

<mx:Button label="{'GO to '+txtInput.text}" left="20" click="launchJS(txtInput.text)"/>
<mx:TextInput id="txtInput" left="130"/>

<!-- The VBox that contains the components -->
<mx:VBox y="50" x="10" height="100%" id="childComponent">

<mx:Repeater id="rep" count="30">

<mx:HBox width="500" y="50" id="box1">

<mx:TextArea id="dummyTa" text="Sample Text" selectable="false" editable="false" borderStyle="none" height="100"/>
<mx:VBox height="100%">
<mx:Button id="dummyBtn" label="Sample Button" height="40"/>
<mx:Button id="dummyBtn2" label="Sample Button" height="40"/>
</mx:VBox>
</mx:HBox>



</mx:Repeater>

</mx:VBox>

</mx:Application>