Add a wc_checkout_form.scroll_to_notices helper and use scrollIntoView

scrollIntoView lets us scroll something to the centre of the viewport.
This ensures the messages, or top of the checkout, comes into view.

Falls back to the old logic for older browsers.

Closes #17220 which didn’t solve the issue.

assets/js/frontend/checkout.js

@@ -391,11 +391,7 @@ jQuery( function( $ ) {
 						// Lose focus for all fields
 						$form.find( '.input-text, select, input:checkbox' ).trigger( 'validate' ).blur();
 
-						// Scroll to top
+						wc_checkout_form.scroll_to_notices();
-						$( 'html, body' ).animate( {
-							scrollTop: ( $( 'form.checkout' ).offset().top - 100 )
-						}, 1000 );
-
 					}
 
 					// Re-init methods
@@ -512,10 +508,28 @@ jQuery( function( $ ) {
 			wc_checkout_form.$checkout_form.prepend( '<div class="woocommerce-NoticeGroup woocommerce-NoticeGroup-checkout">' + error_message + '</div>' );
 			wc_checkout_form.$checkout_form.removeClass( 'processing' ).unblock();
 			wc_checkout_form.$checkout_form.find( '.input-text, select, input:checkbox' ).trigger( 'validate' ).blur();
-			$( 'html, body' ).animate({
+			wc_checkout_form.scroll_to_notices();
-				scrollTop: ( $( 'form.checkout' ).offset().top - 100 )
-			}, 1000 );
 			$( document.body ).trigger( 'checkout_error' );
+		},
+		scroll_to_notices: function() {
+			var scrollElement           = $( '.woocommerce-NoticeGroup-updateOrderReview, .woocommerce-NoticeGroup-checkout' ),
+				isSmoothScrollSupported = 'scrollBehavior' in document.documentElement.style;
+
+			if ( ! scrollElement ) {
+				scrollElement = $( '.form.checkout' );
+			}
+
+			if ( scrollElement ) {
+				if ( isSmoothScrollSupported ) {
+					scrollElement[0].scrollIntoView({
+						behavior: 'smooth',
+					});
+				} else {
+					$( 'html, body' ).animate( {
+						scrollTop: ( scrollElement.offset().top - 100 )
+					}, 1000 );
+				}
+			}
 		}
 	};