Scroll to previous first div in multistep form

Question

I've multistep form in my website. Each step involves upto 7 fields. When I click on next button, it directs me to the first div in next step. But when I click on previous button, it directs me to the second div of last step not the first div as it suppose to do.

How can I resolve this small bug?

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>

If there is any concise approach to do that, it will be more good.

Answer 1

I might have solved it myself.

I just changed this line

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

with

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

It's working now!