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

这是虚拟代码。我的要求是当我点击最后的li元素，然后一个hidden div里面会显示。但我需要scroll下来才能看到它。所以当我点击li与id=hello然后窗口应该自动向下滚动到该div？如何使用CSS/JS滚动到特定元素

首选使用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 Shoaib Chikate

你需要它是动画？ – 2014-11-06 07:05:02

任何东西。只需要自动滚动到该div。 – 2014-11-06 07:07:34

那么，我会尝试的第一件事就是在你的''hello''''里面放一个简单的锚元素，并将它的'href'属性设置为'＃myHiddenDivsId'。它不需要JS。 – 2014-11-06 07:16:25

告诉你/你的扩展隐藏DIV，调用li元素这不需要的jQuery的scrollIntoView功能之后。

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

来源

2014-11-06 07:05:29 shinobi

你可以使用CSS提供解决方案吗？ +1这JS解决方案 – 2014-11-06 07:16:27

@ShoaibChikate我怀疑你可以使用CSS滚动div。虽然您可以在div滚动时使用css效果。但你实际上不能用css设置滚动值。 – shinobi 2014-11-06 07:24:17

您可以使用锚重定向window.location = currentlocation + "#" + id，或者您可以使用jQuery的lib - scrollTo

编辑：我读它cannnot是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 07:03:41 bemol

你可以使用CSS提供解决方案吗？ +1这个JS解决方案。 – 2014-11-06 07:18:15

不幸的是，没有使用CSS的解决方案。 – bemol 2014-11-06 07:38:05

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);

来源

2014-11-06 07:10:43 Painkiller

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

回答

相关问题