我一直在尝试为表单编写jQuery代码，这样当用户选择一个单选按钮时，页面会自动滚动到由frm_opt_container类包装的下一个问题
这是我页面的HTML结构：
<div class="frm_opt_container">
<div class="frm_radio">
<label>
<input type="radio">
</label>
</div>
<div class="frm_radio">
<label>
<input type="radio">
</label>
</div>
<div class="frm_radio">
<label>
<input type="radio">
</label>
</div>
</div>
这是我写的jQuery：
//Scroll Function
var option = document.querySelectorAll('label');
for (var i = 0;; i++) {
option[i].addEventListener('click', function() {
var ele = $(this).parents('.frm_opt_container');
setTimeout(function() {
$("html, body").animate({
scrollTop: $(ele).offset().top
}, 1000);
}, 200);
});
}
问题：代码在桌面上运行良好，但当一个问题有两个多选项时，它在移动设备上只会滚动一点(我在移动设备上将它们显示为块(。
这是一个只包含表单的页面的参考链接。你可以用单选按钮在手机上测试第一个问题。
谢谢！
$(".frm_radio input").on('change', function() {
var selector = $(this).closest('div').next();
$('html, body').animate({
scrollTop: $(selector).offset().top
}, 2000);
});
试试这个jQuery代码
这就是您想要做的吗？
更改/单击单选按钮后，通过以$(this).parents(".frm_form_fields").next()为目标将动画设置为下一个.frm_form_fields：找到输入的.frm_form_fields父级，然后在DOM上选择下一个。
$(".frm_radio input").change(function () {
const $target = $(this).parents(".frm_form_fields").next();
if ($target.length < 1) {
return;
}
$("html, body").animate(
{
scrollTop: $target.offset().top
},
1000
);
});.container {
padding-bottom: 600px;
}
.frm_radio {
padding: 20px;
margin: 10px;
background: cadetblue;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
<div class="frm_form_fields active">
<fieldset>
<div id="frm_field_8_container" class="frm_form_field form-field frm_required_field frm_top_container hear frm_two_col">
<div id="field_e41hw_label" class="frm_primary_label">How did you hear about us?
</div>
<div class="frm_opt_container" aria-labelledby="field_e41hw_label" role="group">
<div class="frm_radio" id="frm_radio_8-0">
<label for="field_e41hw-0">
<input type="radio" name="item_meta[8]" id="field_e41hw-0" value="Google / Youtube" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false">Google / Youtube
</label>
</div>
<div class="frm_radio" id="frm_radio_8-1">
<label for="field_e41hw-1">
<input type="radio" name="item_meta[8]" id="field_e41hw-1" value="Facebook / Instagram" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false">Facebook / Instagram
</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="frm_form_fields">
<fieldset>
<div id="frm_field_8_container" class="frm_form_field form-field frm_required_field frm_top_container hear frm_two_col">
<div id="field_e41hw_label" class="frm_primary_label">How did you hear about us?
<span class="frm_required" aria-hidden="true"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_e41hw_label" role="group">
<div class="frm_radio" id="frm_radio_8-2"><label for="field_e41hw-2"> <input type="radio" name="item_meta[8]" id="field_e41hw-2" value="Yahoo / Bing" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> Yahoo / Bing</label></div>
<div class="frm_radio" id="frm_radio_8-3"><label for="field_e41hw-3"> <input type="radio" name="item_meta[8]" id="field_e41hw-3" value="Email" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> Email</label></div>
</div>
</div>
</fieldset>
</div>
<div class="frm_form_fields">
<fieldset>
<div id="frm_field_8_container" class="frm_form_field form-field frm_required_field frm_top_container hear frm_two_col">
<div id="field_e41hw_label" class="frm_primary_label">How did you hear about us?
<span class="frm_required" aria-hidden="true"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_e41hw_label" role="group">
<div class="frm_radio" id="frm_radio_8-4"><label for="field_e41hw-4"> <input type="radio" name="item_meta[8]" id="field_e41hw-4" value="ATM machine" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> ATM machine</label></div>
<div class="frm_radio" id="frm_radio_8-5"><label for="field_e41hw-5"> <input type="radio" name="item_meta[8]" id="field_e41hw-5" value="Another Client" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> Another Client</label></div>
<div class="frm_radio" id="frm_radio_8-6"><label for="field_e41hw-6"> <input type="radio" name="item_meta[8]" id="field_e41hw-6" value="ATM" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> ATM</label></div>
</div>
</div>
</fieldset>
</div>
<div class="frm_form_fields">
<fieldset>
<div id="frm_field_8_container" class="frm_form_field form-field frm_required_field frm_top_container hear frm_two_col">
<div id="field_e41hw_label" class="frm_primary_label">How did you hear about us?
<span class="frm_required" aria-hidden="true"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_e41hw_label" role="group">
<div class="frm_radio" id="frm_radio_8-7"><label for="field_e41hw-7"> <input type="radio" name="item_meta[8]" id="field_e41hw-7" value="Billboard" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> Billboard</label></div>
<div class="frm_radio" id="frm_radio_8-8"><label for="field_e41hw-8"> <input type="radio" name="item_meta[8]" id="field_e41hw-8" value="Friend / family" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> Friend / family</label></div>
<div class="frm_radio" id="frm_radio_8-9"><label for="field_e41hw-9"> <input type="radio" name="item_meta[8]" id="field_e41hw-9" value="I’m a past client" data-reqmsg="This field cannot be blank." data-invmsg="How did you hear about us? is invalid" aria-invalid="false"> I’m a past client</label></div>
</div>
</div>
</fieldset>
</div>
</div> <!-- End of container for all radio buttons -->