这是虚拟代码。我的要求是,当我单击最后一个li
元素时,它里面的一个hidden div
将是displayed.But,我需要向下scroll
到它才能看到它。那么,当我用id=hello
点击li
时,window会自动向下滚动到该div吗?
首先使用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>
发布于 2014-11-06 15:05:29
在显示/展开隐藏的div之后,调用li
元素的scrollIntoView
函数,这不需要jQuery。
function showIt(elementId) {
var el = document.getElementById(elementId);
el.scrollIntoView(true);
}
有关更多信息,请参阅https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView
发布于 2014-11-06 15:03:41
您可以使用锚重定向window.location = currentlocation + "#" + id
,也可以使用jquery lib - scrollTo
编辑:我读到它不可能是jQuery。试试这个:
ele.addEventListener("click", function (event) {
document.getElementById("hidden-div").style.display="block";
window.location.href = window.location.href + "#hidden-div";
},false);
发布于 2014-11-06 15:10:43
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);
https://stackoverflow.com/questions/26773423
复制相似问题