以多步形式滚动到上一个第一个 div答案

【问题标题】：Scroll to previous first div in multistep form以多步形式滚动到上一个第一个 div
【发布时间】：2020-11-17 20:08:22
【问题描述】：

我的网站中有多步表单。每个步骤最多涉及 7 个字段。当我点击 next 按钮时，它会将我定向到下一步的第一个 div。但是当我点击 previous 按钮时，它会将我定向到最后一步的第二个 div，而不是它应该做的第一个 div。

我该如何解决这个小错误？

HTML

<form>

<fieldset>
    <div class="p active">
       <select>
        <option></option>
       </select>
    </div>
   
 <input type="button"  name="next"/>
</fieldset>

<fieldset>
    <div class="p">
       <select>
        <option></option>
       </select>
    </div>
   
 <input type="button"  name="previous"/>
 <input type="button"  name="next"/>

</fieldset>


</form>

JavaScript

<script>
$(".next").click(function() {
    var $target = $('.p.active').next('.p');
    if ($target.length == 0)
        $target = $('.p:first');

    $('html, body').animate({
        scrollTop: $target.offset().top
    }, 'slow');

    $('.active').removeClass('active');
    $target.addClass('active');
});

$(".previous").click(function() {
    var $target = $('.p.active').prev('.p');
    if ($target.length == 0)
        $target = $('.p:first');

    $('html, body').animate({
        scrollTop: $target.offset().top
    }, 'slow');

    $('.active').removeClass('active');
    $target.addClass('active');
});

</script>

如果有任何简洁的方法可以做到这一点，那就更好了。

【问题讨论】：

标签： javascript html multi-step

【解决方案1】：

我可能自己解决了。

我只是改变了这一行

$target = $('.scroller:first');

与

$target = $('.scroller:last');

现在可以使用了！

【讨论】：