Javascript 当隐藏div可见时滚动到内容

我对这个不太在行，我想不出来。我有三个按钮和三个隐藏的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>

我的按钮：

<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有一个很长的表单，从下一页开始：

编辑1：

您可以使用此脚本。它完全符合你的目的。您需要将输入标记放入锚标记中

编辑2：

---

如果您使用JQuery，我建议您使用以下内容：获取所选内容的上边距（首先，使用

所选的
类，而不是所有那些JS样式的更改），然后滚动到页面上的该位置（
$（'html，body'）。滚动上边距（所选项目上边距）
）那么，我会在我的按钮上添加href链接吗？如果是的话，点击后还会显示我隐藏的div吗？我在答案中添加了一个codepen链接。你可以检查一下。单击div3，您应该能够看到所需的效果。即使你添加了锚定标签，它也不会显示你的div，除非你点击它，效果很好，谢谢！我能不能放慢动画的速度，这样你就可以看到页面滚动，而不是跳转到div3的内容？我正在努力解决这个问题。某些现有代码一定会干扰itI，仅需链接JQuery库即可。非常感谢你的帮助！！！
<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>

$(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;
  }
}
});
});