Прокрутить до конца, если скрыто div видимо

Question

Я не очень хорошо разбираюсь в этом, и я не могу понять это. У меня три кнопки и три скрытых 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> 

Демонстрационный где ДИВ 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 Вы можете использовать этот скрипт. Он отлично работает для вашей цели. Вам нужно будет поместить свои теги ввода в якорный тег.

Edit 2:

Pen