숨겨진 div가 표시 될 때 콘텐츠로 스크롤

Question

나는 이것으로별로 좋지 않아서 이것을 이해할 수 없습니다. 3 개의 버튼과 3 개의 숨겨진 div가 있습니다. 버튼을 클릭하면 숨겨진 내용이 표시됩니다. 내용의 시작 부분이 페이지 상단에 있도록 페이지를 아래로 스크롤 할 수 있습니까?

<script type="text/javascript"> 
function showDiv(num) { 
    document.getElementById('div1').style.visibility='hidden'; 
    document.getElementById('div1').style.height='0px'; 
    document.getElementById('div1').style.overflow='hidden'; 
    document.getElementById('div2').style.visibility='hidden'; 
    document.getElementById('div2').style.height='0px'; 
    document.getElementById('div2').style.overflow='hidden'; 
    document.getElementById('div3').style.visibility='hidden'; 
    document.getElementById('div3').style.height='0px'; 
    document.getElementById('div3').style.overflow='hidden'; 
    document.getElementById('div'+num).style.visibility='visible'; 
    document.getElementById('div'+num).style.height='10px'; 
    document.getElementById('div'+num).style.overflow='visible';  
} 
</script> 

내 CSS는 :

#div1, #div2, #div3 { 
    visibility: hidden; 
    height:0px; 
    overflow:hidden 

} 

.button { 
    background-color: green; 
    border: none; 
    color: white; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 22px; 
    cursor: pointer; 
    font-family: Arial; 
} 

내 버튼 :

<input type="button" class="button" name="Showdiv1" value="Show Div 1" onclick="showDiv('1')" /> 
<input type="button" class="button" name="Showdiv2" value="Show Div 2" onclick="showDiv('2')" /> 
<input type="button" class="button" name="Showdiv3" value="Show Div 3" onclick="showDiv('3')" /> 
<div id="div1"> I'm div1 </div> 
<div id="div2"> I'm div2 </div> 
<div id="div3"> <form style="margin-top:1000px;height: 1000px;" id="form1"> 
     Form with huge data in it 
     </form> </div> 

DIV 3 페이지 아래 더 시작하는 긴 형식이있는 데모 : https://jsfiddle.net/cgrouge/Lx0pyg4L/

Answer 1

$(function() { 
$('a[href*="#"]:not([href="#"])').click(function() { 
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
    if (target.length) { 
    $('html, body').animate({ 
     scrollTop: target.offset().top 
    }, 1000); 
    return false; 
    } 
} 
}); 
}); 

을

편집 1 :

Reference 이 스크립트를 사용할 수 있습니다. 그것은 당신의 목적을 위해 완벽하게 작동합니다. 입력 태그를 앵커 태그 안에 넣어야합니다.

편집 2 :

Pen