8

I have followed Mage documentation from Magento official website on clicking it's jumping on top: I am using 2.3.3, any way to stop jumping?

<div class="product data items"
     data-mage-init='{"mage/tabs": {"openedState": "active", "animate": {"duration": 100}, "active": 1, "disabled": [2], "disabledState": "disabled"}}'>
    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-cars">Cars</a>
    </div>
    <div id="tab-cars" class="item content" data-role="content">Cars content</div>

    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-movies">Movies</a>
    </div>
    <div id="tab-movies" class="item content" data-role="content">Movies content</div>

    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-music">Music</a>
    </div>
    <div id="tab-music" class="item content" data-role="content">Music Content</div>
</div>
7

Now, this functionality is embedded inside lib/web/mage/collapsible.js. And to disable scrolling and transfer this possibility to scroll to the initialization options need to create mixin for this jQuery widget.

app/design/frontend/<VendorName>/<ThemeName>/requirejs-config.js

var config = {
    config: {
        mixins: {
            'mage/collapsible': {
                'js/mage/collapsible-mixin': true
            }
        }
    }
};

app/design/frontend/<VendorName>/<ThemeName>/web/js/mage/collapsible-mixin.js

define([
    'jquery',
], function ($) {

    var hideProps = {},
        showProps = {};

    hideProps.height =  'hide';
    showProps.height =  'show';

    return function (widget) {

        $.widget('mage.collapsible', widget, {
            options: {
                scrollTo: false
            },

            _create: function () {
                this.storage = $.localStorage;
                this.icons = false;

                if (typeof this.options.icons === 'string') {
                    this.options.icons = $.parseJSON(this.options.icons);
                }

                this._processPanels();
                this._processState();
                this._refresh();

                if (this.options.icons.header && this.options.icons.activeHeader) {
                    this._createIcons();
                    this.icons = true;
                }

                if (this.options.scrollTo) {
                    this.element.on('dimensionsChanged', function (e) {
                        if (e.target && e.target.classList.contains('active')) {
                            this._scrollToTopIfVisible(e.target);
                        }
                    }.bind(this));
                }

                this._bind('click');
                this._trigger('created');
            },
        });

        return $.mage.collapsible;
    };
});

  • I will try and let you know if this solution works for anyone please comment here. – Arunendra Nov 14 '19 at 12:57
  • @Volodymyr, I am experiencing the same issue and tried your method above, issue is resolved but all other collapsible sections such as discount code, summary section on cart, checkout page right nav secton etc. are stopped clicking after this implementation. Please help me on this. – Kamlesh Yaduwanshi Nov 20 '19 at 13:46
  • @Arunendra - did you get any final solution on this. please help me. – Kamlesh Yaduwanshi Nov 20 '19 at 13:47
  • @KamleshYaduwanshi If you didn't change the default behavior it should work fine. Tested on the Magento 2.3.3 (fresh install). – Volodymyr Lisniak Nov 20 '19 at 19:49
  • @KamleshYaduwanshi I have downgraded its version to 2.3.2 as I was in a hurry. – Arunendra Nov 21 '19 at 4:51
1

Looks like this have been fixed here. Worked for us. This will still trigger scrolling but only if the extended content extends beyond the bottom of the viewport. This solution has been merged to Magento repo by their team and this issue will be solved in next release.

Same issue on github. Hope this helps.

0

Same issue here for me. Product tabs and Layered Navigation filter also jumping to top of the page after upgrading Magento 2.3.3. Spent lots of time but didn't found any solution. But after spending more time on it, I'm sure it is Magento native thing not related to any theme or extensions. Hope anyone can help on the solution!

0

I am also having this problem with Magento 2.3.3. For Tabs & Layered Navigation. After changing themes & disabling custom modules it still happens.

0

this is a new option added to magento 2.3.3

to remove it use this patch

create a file in your main dir

revert_scrolltop.patch

add this content to file

Index: lib/web/mage/collapsible.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- lib/web/mage/collapsible.js (revision 7ade7283f9b19976781dd039f15f75cf04716b66)
+++ lib/web/mage/collapsible.js (revision 3df55dc134678c0eddfd83f158a902420e5dacc6)
@@ -517,9 +517,9 @@
                 'aria-hidden': 'false'
             });

-            this.element.trigger('dimensionsChanged', {
+            /*this.element.trigger('dimensionsChanged', {
                 opened: true
-            });
+            });*/
         },

         /**

then import it with patch command

patch < revert_scrolltop.patch

clear cache and run

php bin/magento s:up && php bin/magento s:s:d -f
-1

override and comment the below js code in collapsible.js

this.element.trigger('dimensionsChanged', { opened: true });

this was worked for me....

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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