使用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。