在jquery表单提交后滚动到div

时间:2013-03-04 06:16:54

标签: jquery forms submit scrollto scrolltop

我已经测试了滚动到 DIV ID 的所有方法但是没有工作我知道是错的但我不知道是什么,这是我的jquery脚本

$("#sub").click( function() {

$("#myForm").validate({
      rules: {
        page: {
          required: true,
          url: true
        },
        link: {
          required: true,
          url: true
        }
      },
      submitHandler: function(form) {
        $.post( $("#myForm").attr("action"), $("#myForm :input").serializeArray(), 
        function(info){ 
            $("#result").html(info); 
        });

        clearInput();

        $("#myForm").submit( function() {
            return false;   
        });
                    }
    });
});

function clearInput() {
    $('html, body').animate({
        scrollTop: $("#result").offset().top
    }, 2000);
}

我不知道是否有什么东西混合了但是jquery不滚动我在一个新的php文件中测试scrolltop()函数并且工作正常但是当我在这个文件上使用它时没有。

更新

感谢您的帮助netblognet我已经得到了它,我做到了:

$("#sub").click( function() {

    $("#myForm").validate({
          rules: {
            page: {
              required: true,
              url: true
            },
            link: {
              required: true,
              url: true
            }
          },
          submitHandler: function(form) {
            $.post( $("#myForm").attr("action"), $("#myForm :input").serializeArray(), 
            function(info){ 
                $("#result").html(info); 
                //$(this).animate(function(){
                $('html, body').animate({
                    scrollTop: $("#result").offset().top
                     }, 2000);
            //});
            });


            $("#myForm").submit( function() {
                return false;
            });
                        }
        });
});

我把代码放在收入结果相同的地方:D

1 个答案:

答案 0 :(得分:4)

您必须在提交的回调中运行动画。初始函数运行时会触发回调。 (在这种情况下是提交功能。)

$("#myForm").submit( function() {
    $('html, body').animate({
         scrollTop: $("#result").offset().top
    }, 2000);
    return false;
});

如果您的表单是动态加载的,则必须附加处理程序。

$('#myForm').on('submit', function() {
    $('html, body').animate({
         scrollTop: $("#result").offset().top
    }, 2000);
    return false;
});