Как перейти к определенному элементу с помощью CSS/JS

Question

Это фиктивный код. Мое требование - когда я нажимаю на последний элемент li, затем один hidden div внутри него будет отображаться. Но мне нужно scroll до него, чтобы его увидеть. Итак, когда я нажимаю на li с id=hello, тогда окно должно автоматически прокручиваться вниз до этого 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

Только после того, как вы показать/расширить свой скрытый DIV, вызовите scrollIntoView функцию li элемента Это не требует JQuery.

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

редактировать: Я прочитал это cannnot быть JQuery. Попробуйте это:

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