Question

我正在创建一个表单，我有很多子表单要提交，所以我使用了jQuery功能，每个提交一个msg将显示在页面顶部，现在我想要的，在每个提交页面将滚动直到jQuery调用的div。这是我的代码

 var url = "<%=addPersonalDetailsURL%>";    
 var type = "addPersonalDetails";
if(!($('#<portlet:namespace/>address1').val()=='' || $('#country').val()=='None' ||$('#<portlet:namespace/>primaryPhone').val()=='')){
 jQuery.getJSON(url+"&address1="+address1+"&address2="+address2+"&country="+country+"&state="+state+"&city="+city+"&zip="+zip+"&skypeId="+skypeId+"&twitter="+twitter+"&primaryPhone="+primaryPhone+"&secondaryPhone="+secondaryPhone+"&type="+type, function(data) {


            $('html, body').animate({
                scrollTop: $(".success").offset().top
            }, 800);


        for(var z=0; z<data.applicationArray.length;z++){

            applicationArray = data.applicationArray[z].split("$$##$$##");

            address1 = applicationArray[0];
            address2 = applicationArray[1];
            city = applicationArray[2];
            primaryPhone = applicationArray[3];

        }

jQuery.getJSON给出了一些结果，在此基础上我必须使用该功能。所以你能告诉我应该如何修改你的解决方案

Answer 1

您需要在页面中获取元素的顶部位置，然后将滚动条移动到该位置。类似下面的代码：

jQuery(window).scrollTop(jQuery(".success").offset().top);

请注意，上面的代码将移至第一个.success位置。如果必须引用特定的索引，请在选择器中添加索引，例如：

jQuery(window).scrollTop(jQuery(".success:eq(1)").offset().top);

Answer 2

您可以使用此功能执行此操作：

$("button").click(function () {
    $('html, body').animate({
        scrollTop: $(".whichElement").offset().top
    }, 800);
});

说明：

如果单击该按钮，我们将页面滚动到带有类的元素 whichElement，滚动的持续时间为800ms。

示例：

＆＃13;

$(".first-hey").click(function () {
    $('html, body').animate({
        scrollTop: $(".second-hey").offset().top
    }, 800);
});

$(".second-hey").click(function () {
    $('html, body').animate({
        scrollTop: $(".third-hey").offset().top
    }, 800);
});

$(".third-hey").click(function () {
    $('html, body').animate({
        scrollTop: $(".first-hey").offset().top
    }, 800);
});

＆＃13;

.divide {
    height: 1300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="first-hey">First hey</button>

<div class="divide"></div>

<button class="second-hey">Second hey</button>

<div class="divide"></div>

<button class="third-hey">Third hey</button>

＆＃13;

如何每次将页面移动到div

2 个答案: