[英]Scroll to previous first div in multistep form
I've multistep form in my website.我的网站上有多步表单。 Each step involves upto 7 fields.
每个步骤最多涉及 7 个字段。 When I click on next button, it directs me to the first div in next step.
当我单击下一步按钮时,它会将我定向到下一步中的第一个 div。 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.
但是当我单击上一个按钮时,它会将我定向到最后一步的第二个 div,而不是它假设的第一个 div。
How can I resolve this small bug?我该如何解决这个小错误?
HTML 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 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.如果有任何简洁的方法可以做到这一点,那就更好了。
I might have solved it myself.我自己可能已经解决了。
I just changed this line我只是改变了这一行
$target = $('.scroller:first');
with和
$target = $('.scroller:last');
It's working now!它现在工作了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.