我试图让以下代码工作，但它没有：
$.each($("input, select"), function (index, input) {
input.addEventListener("invalid", function () {
this.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
});
});
这就是说：对于我的表单中的每个输入和选择，添加一个事件侦听器来侦听“无效”状态（如果任何输入或选择无效，则在提交表单时触发）。事件侦听器将以流畅的动画滚动输入或选择页面中心的视图。
但它既不滚动到页面中心也不平滑。我的输入和选择会立即滚动到页面顶部。
向事件侦听器添加控制台日志告诉我事件侦听器正在响应，并且“this”确实指的是正确的输入或选择：
console.log('this =', this);
那么为什么这对我不起作用？
编辑：
这是 HTML 部分：
<section class="clearfix form-section">
<div class="container">
<div class="panel-body">
<div class="row">
<div class="col-sm-12 col-xs-12 intro">
Holland and Barnes would be very pleased to get your feedback about our services
</div>
</div>
<form class="feedback">
<div class="row">
<div class="form-group col-sm-6 col-xs-12">
<label for="firstName">First Name *</label>
<input type="text" class="form-control" id="firstName" name="firstName" required>
<p class="help-block">Please enter your first name.</p>
</div>
<div class="form-group col-sm-6 col-xs-12">
<label for="lastName">Last Name *</label>
<input type="text" class="form-control" id="lastName" name="lastName" required>
<p class="help-block">Please enter your last name.</p>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6 col-xs-12">
<label for="email">Email *</label>
<input type="email" class="form-control" id="email" name="email" required>
<p class="help-block">Please enter your email address.</p>
</div>
<div class="form-group col-sm-6 col-xs-12">
<label for="country">Country *</label>
<select class="form-control" id="country" name="country" required></select>
<p class="help-block">Please enter your country.</p>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<fieldset>
<legend class="checkbox-group-legend">What brings you to Calgary? * <input class="hidden-radio-button" id="reasonForVisiting_hiddenRadioButton" type="radio" required /></legend>
<div class="checkbox-group">
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="vacation" group="reasonForVisiting" onclick="reasonForVisiting_checked()">Vacation
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="business" group="reasonForVisiting" onclick="reasonForVisiting_checked()">Business
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="liveHere" group="reasonForVisiting" onclick="reasonForVisiting_checked()">Live Here
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="reasonForVisiting_other" group="reasonForVisiting" onclick="reasonForVisiting_checked(); reasonForVisiting_otherChecked()">Other
<input type="text" class="form-control" style="display: none;" id="reasonForVisiting_otherDetails" name="reasonForVisiting" placeholder="Please provide your reason for visiting Calgary.">
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<fieldset>
<legend class="checkbox-group-legend">How did you hear about us? * <input class="hidden-radio-button" id="hearAboutUs_hiddenRadioButton" type="radio" required /></legend>
<div class="checkbox-group">
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="searchEngine" group="hearAboutUs" onclick="hearAboutUs_checked()">Search Engine
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="friends" group="hearAboutUs" onclick="hearAboutUs_checked()">Friends
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="magazines" group="hearAboutUs" onclick="hearAboutUs_checked()">Magazines
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="newspapers" group="hearAboutUs" onclick="hearAboutUs_checked()">Newspapers
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="billboards" group="hearAboutUs" onclick="hearAboutUs_checked()">Billboards
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="television" group="hearAboutUs" onclick="hearAboutUs_checked()">Television
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="hearAboutUs_other" group="hearAboutUs" onclick="hearAboutUs_checked(); hearAboutUs_otherChecked()">Other
</div>
<div class="col-sm-6 col-xs-12">
<input type="text" class="form-control" style="display: none;" id="hearAboutUs_otherDetails" name="hearAboutUs" placeholder="Please provide how you heard about us.">
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<label>Please give us a rating. *</label>
<hr style="margin-top: 5px;" />
<div class="form-group col-sm-6 col-xs-12">
Rate our service. <input class="hidden-radio-button" id="service_hiddenRadioButton" type="radio" required /><br />
<div>
<img id="service-star-1" class="star" onclick="starClicked('service', 1)" src="/assets/img/ratings/star-unselected.gif" alt="1">
<img id="service-star-2" class="star" onclick="starClicked('service', 2)" src="/assets/img/ratings/star-unselected.gif" alt="2">
<img id="service-star-3" class="star" onclick="starClicked('service', 3)" src="/assets/img/ratings/star-unselected.gif" alt="3">
<img id="service-star-4" class="star" onclick="starClicked('service', 4)" src="/assets/img/ratings/star-unselected.gif" alt="4">
<img id="service-star-5" class="star" onclick="starClicked('service', 5)" src="/assets/img/ratings/star-unselected.gif" alt="5">
<input type="hidden" class="form-control" id="serviceRating" name="serviceRating" value=0>
</div>
</div>
<div class="form-group col-sm-6 col-xs-12">
Rate our site. <input class="hidden-radio-button" id="site_hiddenRadioButton" type="radio" required /><br />
<div>
<img id="site-star-1" class="star" onclick="starClicked('site', 1)" src="/assets/img/ratings/star-unselected.gif" alt="1">
<img id="site-star-2" class="star" onclick="starClicked('site', 2)" src="/assets/img/ratings/star-unselected.gif" alt="2">
<img id="site-star-3" class="star" onclick="starClicked('site', 3)" src="/assets/img/ratings/star-unselected.gif" alt="3">
<img id="site-star-4" class="star" onclick="starClicked('site', 4)" src="/assets/img/ratings/star-unselected.gif" alt="4">
<img id="site-star-5" class="star" onclick="starClicked('site', 5)" src="/assets/img/ratings/star-unselected.gif" alt="5">
<input type="hidden" class="form-control" id="siteRating" name="siteRating" value=0>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<label for="comments">Your comments would be most appreciated. Thank you! *</label>
<textarea class="form-control comments" id="comments" name="comments" rows="10" required></textarea>
</div>
</div>
<input type="hidden" class="form-control" id="recipientEmail" value="@Model.Content.Email" />
<div class="form-group">
<button type="submit" class="btn btn-primary pull-left submit" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing" id="submit">Submit</button>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 submissionError">
There was a problem submitting your feedback. Please try again later.
</div>
</div>
</form>
</div>
</div>
</section>
这是一个演示问题的 JSFiddle：