page scrolling by clicking on add to cart button

Question

In the Magento 2.3.1 on the configurable product detail page.

If size/color is not selected and clicking on add to cart the page is scrolling down.

is this a good behavior?

How can we stop scrolling in this case?

Answer 1

There are 2 Methods of doing this.

First Method:-

You need to Override this file into your custom Theme.

Core File :-

/vendor/magento/magento2-base/lib/web/mage/validation.js

Overrided File :-

/app/design/frontend/[theme_vendor]/[theme]/web/mage/

then Delete/Comment the code on line 1961 in Magento 2.3.2

From

if (firstActive.length) {
     $('html, body').animate({
         scrollTop: firstActive.offset().top
     });
     firstActive.focus();
}

To

if (firstActive.length) {                   
    firstActive.focus();
}

Second Method:-

Here is a solution with a mixin to avoid overwriting the whole file:

1) app/design/frontend/[theme_vendor]/[theme]/Magento_Theme/requirejs-config.js

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Magento_Theme/js/lib/mage/validation-mixin': true
            }
        }
    }
};

2)app/design/frontend/[theme_vendor]/[theme]/Magento_Theme/web/js/lib/mage/validation-mixin.js

define([
    'jquery'
], function ($) {
    'use strict';

    return function (widget) {

        $.widget('mage.validation', widget, {
            /**
             * Handle form validation. Focus on first invalid form field.
             *
             * @param {jQuery.Event} event
             * @param {Object} validation
             */
            listenFormValidateHandler: function (event, validation) {
                let firstActive = $(validation.errorList[0].element || []),
                    lastActive = $(validation.findLastActive() ||
                        validation.errorList.length && validation.errorList[0].element || []),
                    parent, windowHeight, successList;

                if (lastActive.is(':hidden')) {
                    parent = lastActive.parent();
                    windowHeight = $(window).height();
                    $('html, body').animate({
                        scrollTop: parent.offset().top - windowHeight / 2
                    });
                }

                // ARIA (removing aria attributes if success)
                successList = validation.successList;

                if (successList.length) {
                    $.each(successList, function () {
                        $(this)
                            .removeAttr('aria-describedby')
                            .removeAttr('aria-invalid');
                    });
                }

                if (firstActive.length) {
                    /* vertically center the first field on the screen. This is best for UX but if you prefer to avoid the scrolling completelly, just remove the next line and the function "scrollToCenterFormFieldOnError" below. */
                    scrollToCenterFormFieldOnError(firstActive);
                    firstActive.focus();
                }
            }
        });

        function scrollToCenterFormFieldOnError(firstActive) {
            let fieldTop = firstActive.offset().top,
                fieldHeight = firstActive.height(),
                windowHeight = $(window).height(),
                offset;

            offset = fieldTop - ((windowHeight / 2) - (fieldHeight / 2));

            $('html, body').stop().animate({
                scrollTop: offset
            });
        }

        return $.mage.validation;
    }
});

Answer 2

Unfortunately, Vishal's mixin solution raise the following JS error on Magento 2.4 :

validation-mixin.js , line 9 : Uncaught TypeError: base is not a constructor

I could solve this error by replacing :

$.widget('mage.validation', widget, {

by :

$.widget('mage.validation', $.mage.validation, {