JavaScript:需要较低的 div(在绝对 div 下)而不是滚动

Question

我现在的网站布局有问题...

布局与我制作的这个 fiddle 类似。顶层有我的元素缩略图，当用户单击缩略图时，底层会暴露以显示元素详细信息。

我遇到的问题是用户必须向下滚动才能单击顶层的缩略图。然后，当图层淡出时，下面的 div 已经随之滚动 - 我需要将 div 改为scrollTop(0)...

请参阅我的 fiddle 以理解我在说什么:

$('#click').on('click', function(){
	$('#topPanel').fadeOut(600);
})

#click {
  padding:10px 15px;
  position:fixed;
  z-index:100;
}

#topPanel, #bottomPanel {
  width:80%;
  height:auto;
  margin:0 auto;
  padding:100px;
  text-align:center;
}
#topPanel {
  background:green;
  position:absolute;
  z-index:10;
}
#bottomPanel {
  background:yellow;
  position:absolute;
  z-index:0;
}
#topPanel p, #bottomPanel p {
  padding: 500px 0;
  text-transformation:uppercase;
}
#bottomPanel p:nth-child(odd){
  background:#555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click">CLICK ME TO FADEOUT TOP</button>
<br>
<p>please scroll down and then click button above to see issue</p>

<div id="topPanel">
  <p>top of page</p>
  <p>middle of page</p>
  <p>bottom of page</p>
</div>

<div id="bottomPanel">
  <p>top of page</p>
  <p>middle of page</p>
  <p>bottom of page</p>
</div>

https://jsfiddle.net/reese329/50urkgtm/

Answer 1

问题是您的面板没有滚动:整个文档都在滚动!诀窍是在包装元素(或主体)上设置overflow:hidden，并使用overflow-y:scroll使面板本身可滚动。 Here is a working example.

请注意，我必须显式设置面板的高度(设置为 100vh，填充视口(viewport))。

我还修复了您的 text-transform: uppercase 规则(样式是 text-transform，而不是 text-transformation :) )。