javascript - jQuery Dialog 总是显示在滚动条的顶部

Question

在 Anonymous's 的帮助下，我创建了一个包含不同内容选项卡的 jQuery 对话框。答案---> Browsing different content in jQuery Dialog

他为我想要实现的目标提供了一个很好的解决方案。

$(document).ready(function() {
  $('li:first-child, #i1').click(function() {
    $('#main button').css({
      'display': 'inline-block'
    });
    $('#i1').addClass("active");
    $('#i3,#i2').removeClass("active");
    $('#info1').css({
      'display': 'block'
    });
    $('#info2,#info3').css({
      'display': 'none'
    });
  })

  $('li:nth-child(2), #i2').click(function() {
    $('#main button').show();
    $('#i2').addClass("active");
    $('#i1,#i3').removeClass("active");
    $('#info2').css({
      'display': 'block'
    });
    $('#info1,#info3').css({
      'display': 'none'
    });
  })
  $('li:nth-child(3), #i3').click(function() {
    $('#main button').show();
    $('#i3').addClass("active");
    $('#i1,#i2').removeClass("active");
    $('#info3').css({
      'display': 'block'
    });
    $('#info2,#info1').css({
      'display': 'none'
    });
  });

});

#info1,
#info2,
#info3 {
  display: none;
  position: absolute;
  top: 70px;
  background: #454545;
  width: 300px;
  height: 500px;
  color: white;
}
.active {
  background: green;
}
ul li {
  display: inline-block;
  list-style-type: none;
  background: lightblue;
  border: 1px solid black;
}
button {
  display: none;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <ul>
    <li>1nfo</li>
    <li>info2</li>
    <li>info3</li>
  </ul>

  <button id="i1">info1</button>
  <button id="i2">info2</button>
  <button id="i3">info3</button>
  <div id="info1">description of info1</div>
  <div id="info2">description of info2</div>
  <div id="info3">description of info3</div>
</div>

在id=info1/info2/info3中的描述中，当我在其中包含大量数据时，对话框将不得不滚动。所以当我滚动到信息1的底部时，我点击了信息2标签浏览，如果再点击回到信息1标签，信息1中的描述仍然停留在底部，而不是回到顶部.

那么当我在不同的选项卡上被点击时，我如何才能让我的滚动条总是回到顶部呢？我是否需要设置 anchor 或其他东西？

Answer 1

您可以使用 jquery scrollTop 方法滚动到 div 的顶部。

<div id="info1">description of info1</div>

$("#info1").scrollTop(0);