使用jsf和javascript将页面滚动到特定面板

我有一个xhtml页面，其中有一组面板，一个叠在另一个上面。每个面板都有一个datatable，其中有一个特定列作为超链接。单击第一个数据表中的超链接时，将呈现第二个数据表。当我单击第二个datatable中的超链接时，将呈现第三个datatable。我希望我的页面向下滚动并在屏幕中央显示新呈现的数据表，而不是将页面加载回屏幕顶部。我怎样才能做到这一点。下面是我为实现这一目标而编写的代码，但运气不佳

表中的每个超链接都编写了以下代码：

<p:commandLink value="#{abc}" action="#{myBean.myFunction}" 
        ajax="false" oncomplete="focusPanel3()">
    <f:setPropertyActionListener  
        target="#{myBean.xyz}" value="#{abc}">
    </f:setPropertyActionListener>
</p:commandLink>

---

在我的Bean中，我将下一个面板的rendered属性设置为true。

您可以选中jQuery平滑滚动，可以指导您。或jQuery插件，并包括一个基本的演示。使用

document.getElementById

时，不要忘记提供正确的HTML生成的客户端ID

function focusPanel3() {
        var el = document.getElementById("panel3");
        el.scrollIntoView();
        window.scroll(0, 1200); //Also tried this line. No luck even then
}