CSS/JS를 사용하여 특정 요소로 스크롤하는 방법

Question

이것은 더미 코드입니다. 내 요구 사항은 내가 마지막으로 li 요소를 클릭 한 다음 hidden div 요소가 표시 될 것입니다. 그러나이를 보려면 scroll해야합니다. id=hello으로 li을 클릭하면 창이 자동으로 해당 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>

Answer 1

을 당신이 li 요소 이 더 jQuery를 필요로하지의 scrollIntoView 함수를 호출, 숨겨진 사업부를 확장/보여 직후.

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

당신이이 애니메이션 필요하십니까 https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

Answer 2

당신은 window.location = currentlocation + "#" + id 리디렉션 앵커를 사용하거나, JQuery와 LIB 사용할 수 있습니다 - scrollTo

편집 : 를 내가 jQuery를 할 수 cannnot 읽어 보시기 바랍니다. 이 시도 :

ele.addEventListener("click", function (event) { 
    document.getElementById("hidden-div").style.display="block"; 
    window.location.href = window.location.href + "#hidden-div"; 
},false); 

Answer 3

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