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

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>

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

那么如何让浏览器在 div 显示后显示它的顶部。

Answer 1

window.scrollTo(x, y)

如果你想将页面滚动到顶部使用

window.scrollTo(0, 0)

否则，更改第二个参数。