Question

我在html上有表单并使用以下代码提交表单

<div class="submit-clear">
<input  id="generate" type="submit"  name="script" value="create"/>
</div>

表单数据将显示在哈希标记页div

底部的单独#output上

输出部分div id为

<div id="output-main">

<-------output of the form data will be displayed here---->

</div>

用户提交表单后，我需要将网页滚动到<div id="output-main">部分以显示输出。在搜索上一个问题后，我得到了以下解决方案，但它不适合我。请在这里帮助我

$('#generate').click(function() {

   $.scrollTo($('#output-main'), 500);
});

编辑：

我必须在表单提交后滚动网页。在提交表单后，网页将刷新数据并加载带表单输出的#ouput页面

Answer 1

您是否正确包含了滚动library？你确定你没有在其他地方得到任何js错误（这可能会破坏你的代码）吗？

这是一个有效的演示：http://jsfiddle.net/8Cy7V/

$("#generate").click(function() {
    $.scrollTo( '#output-main', 800);
});

Answer 2

试试这个：

$(document).ready( function() {
   $('#generate').click(function(e) {
       e.preventDefault();
       $('html, body').animate({scrollTop:$("#output-main").offset().top}, 500);
   }); 
});

请参阅fiddle。

Answer 3

$("#output-main").scrollTop($("#output-main")[0].scrollHeight);

Answer 4

你提交表格吗？我的意思是，点击提交后您的页面是否会刷新？如果是，请尝试以下代码：

$(document).ready(function(){
   var item = $('#output-main');
   $('html,body').animate({scrollTop: item.offset().top});
});

确保此页面包含jquery。当然，您必须检查何时执行上述代码。您必须检查表单是否已提交，然后才能运行代码而不是文档就绪状态。

使用jquery onclick滚动网页到div

4 个答案: