页面滚动到绝对顶视图子高度

Question

我创建了一个包含大量数据的div产品。和一个使用绝对位置和z-index的注册形式的div：2和一个用于显示和隐藏该注册表单的按钮。当用户点击注册时，它显示在顶部。但我希望我的页面滚动到注册表单的高度。但它的卷轴直到整个身体，也显示了最后的产品。我用我的代码示例创建了代码段。在这里我只想滚动页面黄色背景。我想使用纯CSS或几乎不是纯Java脚本来做这件事，并且不能使用J Query。

＆＃13;

＆＃13;

#signup
{
position:absolute;
top:0px;
left:10%;
z-index:2;
background-color:#ffff00;
width:80%;
}

＆＃13;

<div id="Product">
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  </div>
<div id="signup">
  <h1>Login</h1>
<input type="text"/><br><br>
  <input type="text"/><br><br>
  <input type="text"/><br><br>
  <input type="text"/><br><br>
  <input type="text"/><br><br>
  <input type="text"/><br><br>
  <input type="text"/><br><br>
   <input type="text"/><br><br>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你在这里：

#signup
{
position:absolute;
top:0px;
left:10%;
z-index:2;
background-color:#ffff00;
width:80%;
  height: 300px;
overflow: auto;
}

body{
  overflow: hidden;  
}

<div id="Product">
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  <h1>Something Goes Here</h1>
  </div>
<div id="signup">
  <h1>Login</h1>
<input type="text"/><br><br>
  <input type="text"/><br><br>
  <input type="text"/><br><br>
  <input type="text"/><br><br>
  <input type="text"/><br><br>
  <input type="text"/><br><br>
  <input type="text"/><br><br>
   <input type="text"/><br><br>
</div>