0

I'd like the user to be scrolled to the top of the product page upon successfully adding a product to their cart, so that they can see the success message.

What would be the best way to accomplish this?

2 Answers 2

4

Try this code in your custom js

require(['jquery'],function($){
    $('[data-block="minicart"]').on('contentLoading', function (event) {    
        $('[data-block="minicart"]').on('contentUpdated', function ()  {
            $('html, body').animate({scrollTop:0}, 'slow');
        });
    });
});
2
  • Works perfectly, thank you!
    – brackfost
    Commented Jul 23, 2019 at 15:53
  • This causes the animation to fire off N number of times (number of items in the minicart) which can cause page stuttering if someone has 3+ items in the cart. (And it gets worse with more items 7+ in the cart).
    – CD Brian
    Commented Dec 28, 2022 at 19:32
0

Extend the core Magento_Catalog view and put this at the bottom inside Magento_Catalog->product->view->form.phtml:

    <script>
  require([
    'jquery'
  ], function($) {
    $(window).on('load', function() {
      $("#product_addtocart_form").on('submit', function() {
        $("html, body").animate({
          scrollTop: 0
        }, "slow");
      });

    });
  })
</script>

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.