在JSF / Primefaces页面中自动滚动

Question

I am using primefaces and JSF2.0 to built page.

In the page I have two Panels when I click on the button "Click-me" one panel one, it rendered the second panel in the same page, what I want is when I click the button "Click-me" page should also scroll down automatically and should bring the Second Panel Header in front of the user, Currently user need to manually scroll down to see the second panel. Code is as below

XHTML Page

<h:form id="form1">
    <p:panel header="Panel One" id="PanelOne" >
        <h:panelGrid styleClass="panelGrid" columns="2" id="PanelOneGrid" width="90%" >

            <h:outputText value="First Input Field Panel One" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

            <h:outputText value="Second Input Field Panel One" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

            <h:outputText value="" ></h:outputText>
                <p:commandButton value="Click-me" update="form1" action="#{autoScrollBean.clickAction}">
                </p:commandButton>

        </h:panelGrid>
    </p:panel>  

    <p:panel header="Second One" id="PanelTwo" rendered="#{autoScrollBean.renderPanelTwo}">
        <h:panelGrid styleClass="panelGrid" columns="2" id="PanelTwoGrid" width="90%" >

            <h:outputText value="First Input Field Panel Two" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

            <h:outputText value="Second Input Field Panel Two" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

        </h:panelGrid>
    </p:panel>  

</h:form>

Managed Bean is as below

@ManagedBean
@ViewScoped
public class AutoScrollBean {

private boolean renderPanelTwo;

public boolean isRenderPanelTwo() {
    return renderPanelTwo;
}

public void setRenderPanelTwo(boolean renderPanelTwo) {
    this.renderPanelTwo = renderPanelTwo;
}

public void clickAction () {
    System.out.println("Inside Method");
    setRenderPanelTwo(true);
}

}

EDIT:

<p:focus /> 

By using above focus command, curosr goes to the first input field and that input field is shown to the user after auto scroll, But I want to show the user from Panel Header NOT from the first input field.

Answer 1

I did it by using JavaScript and tested in IE only as my requirement doesn't required all browser compatibility hence I didn't tested for other browser.

The JavaScript function need to placed in the header (h:head) section if you are using template structure in the JSF2.0

<script type="text/javascript">
    function ScrollPage(location) {
        window.location.hash=location;
    }
</script>

Create the anchor in page where you want to scroll or anchor the page

<a id="anchorSecondPanel">

While clicking command button call this function on oncomplete event

oncomplete="ScrollPage('anchorSecondPanel')"

The complete modified code for xhtml is as below

<h:form id="form1">
    <p:panel header="Panel One" id="PanelOne" >
        <h:panelGrid styleClass="panelGrid" columns="2" id="PanelOneGrid" width="90%" >

            <h:outputText value="First Input Field Panel One" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

            <h:outputText value="Second Input Field Panel One" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

            <h:outputText value="" ></h:outputText>
                <p:commandButton value="Click-me" update="form1" action="#{autoScrollBean.clickAction}" oncomplete="ScrollPage('FeatureMainPanel')">
                </p:commandButton>

        </h:panelGrid>
    </p:panel>

    <a id="anchorSecondPanel">
    <p:panel header="Second One" id="PanelTwo" rendered="#{autoScrollBean.renderPanelTwo}">
        <h:panelGrid styleClass="panelGrid" columns="2" id="PanelTwoGrid" width="90%" >

            <h:outputText value="First Input Field Panel Two" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

            <h:outputText value="Second Input Field Panel Two" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

        </h:panelGrid>
    </p:panel>  

</h:form>

Answer 2

Well just add some javascript at your xhtml.

<script>        
    function scroll()
    {
        var grid = $("#form1\\:PanelTwo .panelGrid");       
        $('html, body').animate({
            scrollTop : grid.offset().top
        },4000);                
    }           
</script>

And call this when you push the button:

<p:commandButton value="Click-me" update="form1" action="#{autoScrollBean.clickAction}"  oncomplete="scroll()" >

This will do the scrolltrick