1

I saw some simillar questions, but they wanted to remove this feature. They suggested to comment some code in MAGENTO_ROOT/vendor/magento/magento2-base/lib/web/mage/validation.js file

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

the part with animate, but actually in my vendor file this code was not there. So i added in my file since I want this feature. But nothing happens, when continue button on checkout is pressed and I have errors in form, the body doesn't scroll to the invalid input. On desktop it's ok, but on mobile, the user might never see the error.

I've also tried to put in my JavaScript file, some custom code, some jquery, when the button is clicked. I thought initial that it doesn't work because the button is already having the onclick event from magento files, from knockout. But i think that my jquery is not working because the element are not there, and the functions is triggered before the html elements load in dom.

enter image description here

1
  • Does your file called? Aug 14, 2019 at 14:18

1 Answer 1

4

Try something like this

    require(['jquery', 'domReady!'], function($){
        $(document).on('click','body .action.primary.continue', function(){
            if($('._required._error:visible:first').offset() !== undefined) {
                $('html, body').animate({
                    scrollTop: $('._required._error:visible:first').offset().top
                }, 500);
            }
        });
    });
3
  • it works, with the metion that the classes are body .action.primary.continue, not checkout, in case someone need this and doesn't pay attention Aug 19, 2019 at 13:21
  • Thanks for the mention, i've edited my post.
    – Tsita
    Aug 19, 2019 at 13:39
  • Great thanks, it is working fine exactly as per requirement..!! Jun 23, 2020 at 14:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.