Question

这就是我想要达到的目标。

我有一个＆＃34; HTML表格＆＃34;对于用户需要填写的一些字段，有很多input元素，所以我需要一个滚动条。在表单的末尾，我有一个submit按钮，当用户点击提交时，我希望整个表单向上滚动，然后显示一个新的div，其中包含用户拥有的所有信息进入。

我不希望在用户点击提交之前看到此div，但滚动功能应仅限于＆＃34; HTML表单＆＃34;并且用户不应该向下滚动到此部分（只有通过单击提交按钮才能看到该部分）

我如何使用jQuery或任何其他jQuery库来做到这一点？

Answer 1

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

JS

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

});

HTML

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

FIDDLE

<强>更新

这是一个新的小提琴，在提交后隐藏表单，用＆＃34;编辑＆＃34;显示信息。按钮并再次显示表单进行编辑：

NEW FIDDLE

Answer 2

嗯，首先要点击提交按钮，你要用来向上/向下滚动并隐藏/显示div的jQuery如下：

的jQuery

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

这是您想要使用的假设HTML

HTML

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

如果您想让隐藏的div覆盖所有内容并且位于顶部，我可以为您提供CSS建议，即将z-index设置为较高的值position:fixed; height:100%; width:100%;。我通常会设置一个这样的div并在其中添加一个表格并将其设置为div的宽度和高度，以便我可以将一个td设置为在屏幕中央看起来像div。

编辑：

我忘了向你解释滚动的东西，你看我覆盖了提交按钮，其中a标记指向id="form" ..基本上，jQuery可以使用任何给定的ID 。所以只需设置一个指向元素ID的链接即可。

另外，在 CSS ：

中

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

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

2 个答案:

的jQuery

HTML