HTML5部分中的滚动位置

时间:2016-11-16 17:21:22

标签: html5 scroll

在我的PHP / HTML5文档中,我包含了一个HTML5部分,我需要这个部署一个带有静态标头的表,这对我来说很好。

我的问题是,表格是带有复选框的表格。如果我单击复选框,我会创建一些带有信息的新行。

点击复选框会在重新加载后创建一个侧面重新加载我需要滚动到最后一个位置。

没有该部分,它可以正常工作。我保存窗口位置我隐藏的表单元素,并在重新加载后,在事件“windows.onload”我滚动到值:

function finance_submit(){
    document.forms.finance.winpos.value=window.scrollY;
    finance.submit();
    return;
}   

window.onload = function()
{
    window.scrollTo(0, document.forms.finance.winpos.value);
}

现在我需要从该部分获取滚动位置,然后我需要将该部分滚动到该值。

这里是来自以下部分的纯HTML代码:

<style type="text/css">
    html, body{
  margin:25px;
  padding:0;
height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:1000px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #FFFFCC;
  color: #000;
  padding: 1px 2px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 2px;
  top: 0;
  margin-left: -2px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}

.neutral {
  background: #FFFFCC;
  
}

.red {
  background: red;
  
}

.orange {
  background: orange; 
}

.green {
  background: green;
}

#spalte1 { width: 80px; }
#spalte2 { width: 300px; }
#spalte3 { width: 350px; }
#spalte4 { width: 110px; }
#spalte5 { width: 110px; }
#spalte6 { width: 110px; }
#spalte7 { width: 110px; }
#spalte8 { width: 110px; }
#spalte9 { width: 88px; }
#spalte10 { width: 108px; }
#spalte11 { width: 88px; }
#spalte12 { width: 103px; }
#spalte13 { width: 50px; }
#spalte14 { width: 50px; }


</style>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <title>HTML table pure CSS fixed header by dPixie</title>
</head>

<body>
  <section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
        <th id='spalte1'>Nummer<div>Nummer</div></th>
          <th id='spalte2'>Kunde<div>Kunde</div></th>
          <th id='spalte3'>Name<div>Name</div></th>
          <th id='spalte4'>Vertr.Termin<div>Vertr.Termin</div></th>
          <th id='spalte5'>Liefertermin<div>Liefertermin</div></th>
          <th id='spalte6'>Überg.Termin<div>Überg.Termin</div></th>
          <th id='spalte7'>Rechn.Leg.<div>Rechn.Leg.</div></th>
          <th id='spalte8'>Auftrags Sum<div>Auftrags Sum</div></th><th id='spalte9'>Ext.Leist.<div>Ext.Leist.</div></th>
          <th id='spalte10'>Auftr.Budg.<div>Auftr.Budg.</div></th><th id='spalte11'>Int.Kosten<div>Int.Kosten</div>
          </th><th id='spalte12'>Ertrag<div>Ertrag</div></th>
          <th id='spalte13'>%<div>%</div></th>
          <th id='spalte14'>Details<div>Details</div></th>  
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        </tr>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        </tr><tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        </tr><tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
</body>
</html>

你能帮助我吗?

0 个答案:

没有答案