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

Question

我有一组xhtml页面，其中一组面板叠放在一起。每个面板都有一个特定列的数据表作为超链接。当我点击第一个数据表中的超链接时，将呈现第二个数据表。当我单击第二个数据表中的超链接时，将呈现第三个数据表。我希望我的页面向下滚动，并在屏幕中心显示新呈现的数据表格，而不是将页面加载回屏幕顶部。我该如何实现它。下面是我写的实现这个目标的代码，但没有运气。

每个具有下面的代码写在表中的超链接，

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

的JavaScript是如下

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

在我的豆，我设置的下面板的呈现属性为真。

Answer 1

你可以检查jQuery平滑滚动出，this answer可以指导你。或者jQuery scrollTo插件和this answer也包含基本演示。当您使用document.getElementById时，不要忘记给出正确的HTML生成的cliend ID。