Animated anchor

[rhancke]

Hello,

Is there a way to animate an anchor using rich:jQuery setting speed effect? (I am using 3.3.0 GA1)

<a4j:form>

    <a4j:outputPanel layout="block">

        <rich:dataTable id="table"

                var="item"

                value="#{myBean.items}">

           <a4j:support event="onRowClick"

                              action="#{myBean.action}"

                              reRender="subPanel"

                              oncomplete="scroll('#myAnchor')" />

           <rich:column>#{item.description}</rich:column>

        </rich:dataTable>

    </a4j:outputPanel>

    <a4j:outputPanel id="subPanel" layout="block">

        <a name="#myAnchor"></a>

        <rich:dataTable id="subTable"

                               var="subItem"

                               value="#{myBean.subItems}">

           <rich:column>#{subItem.description}</rich:column>

        </rich:dataTable>

    </a4j:outputPanel>

</a4j:form>

<script type="text/javascript">

  function scroll(anchor) {

    window.location.href="page.jsp" + anchor;

  }

</script>

[rhancke]

I've found a solution to apply animation in anchor event using jQuery:

<div id="myDiv">

     <a4j:form>

          <a4j:outputPanel layout="block">

               <rich:dataTable id="table"

                                      var="item"

                                      value="#{myBean.items}">

                     <a4j:support event="onRowClick"

                                        action="#{myBean.action}"

                                        reRender="subPanel"

                                        oncomplete="scroll('#myAnchor')" />

                     <rich:column>#{item.description}</rich:column>

               </rich:dataTable>

          </a4j:outputPanel>

          <a4j:outputPanel id="subPanel" layout="block">

               <a id="myAnchor" name="myAnchor" href="#myAnchor"></a>

               <rich:dataTable id="subTable"

                                      var="subItem"

                                      value="#{myBean.subItems}">

                     <rich:column>#{subItem.description}</rich:column>

               </rich:dataTable>

          </a4j:outputPanel>

     </a4j:form>

</div>

<script type="text/javascript">

  function scroll(anchor) {

    var top=(jQuery(anchor).position().top);

    jQuery("#myDiv").animate({'scrollTop': top},1000)

  }

</script>