Javascript 添加一个按钮向下滚动并禁用该区域的滚动条滚动

这就是我想要实现的目标

我有一个“HTML表单”，其中包含一些用户需要填写的字段，有很多

输入
元素，因此我需要一个滚动条。在表单的末尾，我有一个
submit
按钮，当用户点击submit时，我希望完整的表单向上滚动，然后会显示一个新的
div
，其中包含用户输入的所有信息

我不希望在用户单击提交之前看到此div，即滚动功能应仅限于“HTML表单”，并且用户不能向下滚动到此部分（该部分应仅通过单击提交按钮可见）

如何使用jQuery或任何其他jQuery库实现这一点
 首先，当单击submit按钮时，您要使用jQuery向上/向下滚动并隐藏/显示div，如下所示：

jQuery
这是您想要使用的假定HTML

HTML
您可以使用
preventDefault
停止表单提交，找到每个输入的值，将其返回到隐藏容器中，然后向上滑动以查看：

JS

HTML




更新

这是一个新的提琴，它在提交后隐藏表单，用“编辑”按钮显示信息，并再次显示要编辑的表单：

至少为我重新定向适当的资源，而不是仅仅投反对票！您应该向我们提供迄今为止的代码，以便更容易地使用。使用
.hide（）
和
.show（）
使DIV不可见和可见。怎么了？不！您的代码将结果添加到顶部..我想在同一页上显示结果。但是输入表单当时不应该可见@harrythomas那么你想在提交表单后隐藏表单？是的，完全正确。表单应该在查看结果时隐藏。如果用户希望编辑信息，那么应该有一些按钮，允许他编辑信息耶！就像我想要的那样！非常感谢。我接受了答案，但请指导我如何才能添加好的动画效果。。Thanks@harrythomas没问题，很乐意帮忙。我将发布一个单独的问题，以获得更多的帮助，因为原来的问题已经解决了
$(document).ready(function(){
  $(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;
        }
      }
    });
  });
  $(".hidden").hide(); // Hide all elements you want to be hidden until you send the form
  $(".submit").click(function(){
    $(".hidden").fadeIn(400); // Show hidden items when click on submit button. You may also use show() function if you don't want it to fade in. Change the 400 for the time you want it to take to fade in (in miliseconds). 400 is default so you may just delete the 400.
  });
});

<div class="hidden">
    <!-- The div you want to hide and then put all the sent info to show when click on sent -->
</div>
<div class="scroll-section">
  <form method="post" action="" id="form">
    <!-- Your form here -->
    <a href="#form"><input type="submit" value="Submit info" class="submit"/></a>
  </form>
</div>

.scroll-section {
    overflow-y:scroll;
    height:600px; // Give it a height
}

$("input[type=submit]").click(function(e){
  e.preventDefault()

  var input1 = $("#field1").val();
  var input2 = $("#field2").val();
  var input3 = $("#field3").val();
  var input4 = $("#field4").val();
  var input5 = $("#field5").val();
  var input6 = $("#field6").val();

  $(".info").html("field 1: " + input1 + " field 2: " + input2 + " field 3: " + input3 + " field 4: " + input4 + " field 5: " + input5 + " field 6: " + input6).show();
  $("html,body").animate({ scrollTop: 0 });

});

<div class="info"></div>
<form>
  <input type="text" id="field1"/>
  <input type="text" id="field2"/>
  <input type="text" id="field3"/>
  <input type="text" id="field4"/>
  <input type="text" id="field5"/>
  <input type="text" id="field6"/>
  <input type="submit"/>
</form>