4 Replies Latest reply on Nov 17, 2009 9:14 AM by lee704

    Simple way to return to the top of the component

    lee704 Level 1

      I have several long forms that scroll down.  I would like to give the user a button to allow them to return to the top of the component without having to scroll themselves.  Is there a simple way to do this in Flex?

       

      Thanks!

        • 1. Re: Simple way to return to the top of the component
          msakrejda Level 4

          In the handler for the Button click, set the component's verticalScrollPosition to 0.

          1 person found this helpful
          • 2. Re: Simple way to return to the top of the component
            lee704 Level 1

            Thank you.  Unfortunately, this seems to only control the browsers vertical scroll bar.  My component scrolls within another component so there is never a browser scroll bar.  Is there a way to control the scroll bar inside the application?

            • 3. Re: Simple way to return to the top of the component
              paul.williams Level 4

              You just need to set the verticalScrollPosition on the corresponding container. Eg:

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application
              xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="vertical"
              height="300">

              <mx:Label
                text="Scrollable Form: "/>
               
              <mx:VBox
                id="scrollable"
                height="100%"
                minHeight="0"
                width="300">
               
                <mx:FormItem
                 label="Question 1">
                 <mx:TextInput/>
                </mx:FormItem>
               
                <mx:FormItem
                 label="Question 2">
                 <mx:TextInput/>
                </mx:FormItem>
               
                <mx:FormItem
                 label="Question 3">
                 <mx:TextInput/>
                </mx:FormItem>
               
                <mx:FormItem
                 label="Question 4">
                 <mx:TextInput/>
                </mx:FormItem>
               
                <mx:FormItem
                 label="Question 5">
                 <mx:TextInput/>
                </mx:FormItem>
               
                <mx:FormItem
                 label="Question 6">
                 <mx:TextInput/>
                </mx:FormItem>
               
                <mx:FormItem
                 label="Question 7">
                 <mx:TextInput/>
                </mx:FormItem>
               
                <mx:FormItem
                 label="Question 8">
                 <mx:TextInput/>
                </mx:FormItem>
               
                <mx:FormItem
                 label="Question 9">
                 <mx:TextInput/>
                </mx:FormItem>
               
                <mx:FormItem
                 label="Question 10">
                 <mx:TextInput/>
                </mx:FormItem>
               
                <mx:Button
                 label="Back to top"
                 click="scrollable.verticalScrollPosition = 0"/>
               
              </mx:VBox>

              </mx:Application>

              1 person found this helpful
              • 4. Re: Simple way to return to the top of the component
                lee704 Level 1

                Thanks Paul.  It is still not working.  I wonder if it is because my components are within a ViewStack.  Could there be a difference in how a ViewStack handles scrolling?