html - 处理溢出的多重滚动 :auto

Question

页面上有许多弹出窗口具有overflow:auto属性

结构是——

<div id="popup1">
  <div>SomeHTMLSTRUC</div>
  <div>SomeHTMLSTRUC</div>
  <ul class="scroll"></ul>
</div>
<div id="popup2">
  <div>SomeHTMLSTRUC</div>
  <div>SomeHTMLSTRUC</div>
  <ul class="scroll"></ul>
</div>

此 ul 具有此类滚动属性。现在，如果我在其中一个弹出窗口中滚动到底部。如何设置下次打开另一个弹窗时滚动到顶部？

Answer 1

添加

document.getElementById('popup1').children[0].scrollTop = 0;

在打开弹出窗口的代码之前。这假设 <ul>是 <div> 的第一个唯一直系子代.

工作演示:http://jsfiddle.net/sdz8nc3j/

---

编辑:随着最近对问题的更新，使得 <ul> 第三个​​ child ，您需要更改 [0]至 [2] .您也可以只找到 <ul>而不是依赖 child 的数量:

document.getElementById('popup1').getElementsByTagName('ul')[0].scrollTop = 0;

工作演示:http://jsfiddle.net/sdz8nc3j/3/

---

---

我还制作了一个 jQuery 版本，尽管它并没有真正为您节省任何东西。它还搜索 <ul> .

$popup1 = $("#popup1");
$popup1.click(function(){
    $popup1.children('ul').scrollTop(0);
});

工作演示:http://jsfiddle.net/sdz8nc3j/1/