如何使用CSS/JS滚动到特定元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (311)

这是虚拟代码。我的要求是,当我点击最后一个li元素时hidden div,它将显示在其中的一个。但我需要scroll向下看它。所以,当我点击liid=hello再往下窗口会自动滚动到该分区?

首先使用CSS然后使用JS而不使用jQuery。

var ele=document.getElementById('hello');


ele.addEventListener("click", function (event) {
    document.getElementById("hidden-div").style.display="block";
},false);
.fixed-height-div{
 height:120px;
 overflow-y:scroll;
}

.fixed-height-div > li{
    background-color:lightblue;
    list-style-type: none;
}
<div class="fixed-height-div">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li id="hello">H
      <div id="hidden-div" style="display:none;">
          This should be displayed after click<br><br>
          And the scroll should come to this screen.
       </div>
    </li>

提问于
用户回答回答于

在显示/展开隐藏的div之后,调用scrollIntoView的功能li元素,这不需要jQuery。

function showIt(elementId) {
    var el = document.getElementById(elementId);
    el.scrollIntoView(true);
}

如需更多参考https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

用户回答回答于
var ele=document.getElementById('hello');
ele.addEventListener("click", function (event) {
    document.getElementById("hidden-div").style.display="block";
    var top = this.offsetTop;
    this.parentNode.scrollTop += top; //Container div scroll
    document.body.scrollTop += top; //Body scroll
},false);

扫码关注云+社区

领取腾讯云代金券