Question

我有一个包含两个div的页面，一个隐藏，一个显示。当我点击页面底部的链接时，我希望显示隐藏的div并隐藏显示的div。它工作正常，但如果浏览器高度很小（例如，在移动设备上），用户会看到显示的div一直滚动到底部。

以下是页面：

<script type="text/javascript">
function display()
{
  document.getElementById('div2').style.display="block";
  document.getElementById('div1').style.display="none";
}
</script>

<!-- Start of content -->
  <div id="div1" style="display:block">
    <h2>This is shown at the beginning</h2>
    <p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
    <p>Hello</p><p>Hello</p><p>Hello</p>
    <a rel="external" href="bogus.tar.gz" onclick="display(); return true">Click here</a>
  </div>

  <div id="div2" style="display:none">
  <h2>This is shown later</h2>
    <p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
    <p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
  </div>

如果我将链接放在页面的 top 上，问题就会消失，但页面流程要求链接位于页面底部。

那么一旦显示div，我怎么能让浏览器显示div的 top 。

Answer 1

window.scrollTo(x, y)

如果要将页面滚动到顶部，请使用

window.scrollTo(0, 0)

否则，请更改第二个参数。

Answer 2

在显示div2之前隐藏div1。

如果它没有运行，请使用scrollto javascript（基于显示的div）调用来解决问题

Answer 3

document.getElementById('div2').scrollTop=0

显示/隐藏div显示暴露的div的底部

3 个答案: