Scroll to particular component using af:scrollComponentIntoViewBehavior tag in ADF Faces

You all must have seen HTML Anchor links, this is actually called link within page and used to navigate between page sections
Same as HTML anchor tag ADF Faces has <af:scrollComponentIntoViewBehavior> tag that allows user to jump to a particular component on page

So in this post i am using 5 images and 5 buttons to navigate to each image, set clientComponent property of all af:image to true because this tag is supported only by client rendered components.

Dropped scrollComponentIntoViewBehavior under all buttons and provided id of respective af:image component
See XML source of page -

<af:panelStretchLayout id="psl1" topHeight="25px" bottomHeight="25px" dimensionsFrom="parent">
                    <f:facet name="bottom">
                        <af:panelGroupLayout id="pgl3" layout="horizontal">
                            <af:button text="Paragliding" id="b4">
                                <af:scrollComponentIntoViewBehavior componentId="i1"/>
                            </af:button>
                            <af:button text="Rope Way" id="b5">
                                <af:scrollComponentIntoViewBehavior componentId="i5"/>
                            </af:button>
                        </af:panelGroupLayout>
                    </f:facet>
                    <f:facet name="center">
                        <af:panelGroupLayout id="pgl1" layout="scroll">
                            <af:image source="#{resource['images:1.jpg']}" id="i1"
                                      inlineStyle="width:700px;height:400px;" shortDesc="Paragliding"
                                      clientComponent="true"/>
                            <af:image source="#{resource['images:3.jpg']}" shortDesc="Rope Way" id="i5"
                                      inlineStyle="width:700px;height:400px;" clientComponent="true"/>
                            <af:image source="#{resource['images:2.jpg']}" id="i2"
                                      inlineStyle="width:700px;height:400px;" shortDesc="Green Ground"
                                      clientComponent="true"/>
                            <af:image source="#{resource['images:8.jpg']}" id="i3"
                                      inlineStyle="width:700px;height:400px;" shortDesc="Beautiful Cottage"
                                      clientComponent="true"/>
                            <af:image source="#{resource['images:9.jpg']}" id="i4"
                                      inlineStyle="width:700px;height:400px;" shortDesc="Sheeps"
                                      clientComponent="true"/>
                        </af:panelGroupLayout>
                    </f:facet>
                    <f:facet name="start"/>
                    <f:facet name="end"/>
                    <f:facet name="top">
                        <af:panelGroupLayout id="pgl2" layout="horizontal">
                            <af:button text="Green Ground" id="b1">
                                <af:scrollComponentIntoViewBehavior componentId="i2"/>
                            </af:button>
                            <af:button text="Beautiful Cottage" id="b2">
                                <af:scrollComponentIntoViewBehavior componentId="i3"/>
                            </af:button>
                            <af:button text="Sheeps" id="b3">
                                <af:scrollComponentIntoViewBehavior componentId="i4"/>
                            </af:button>
                        </af:panelGroupLayout>
                    </f:facet>
                </af:panelStretchLayout>

Page looks like this -