Magento 2.3.3 tab jumping on Top

Question

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>

Volodymyr Lisniak · Accepted Answer · 2020-02-06T07:07:05.097

28

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;
    };
});

UPD: that was fixed in Magento 2.3.4 (Pull Request)

edited Feb 06 '20 at 07:07

answered Nov 06 '19 at 10:22

Volodymyr Lisniak

656
5
10

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 04:51
@VolodymyrLisniak fix is working great thank you very much. – Aman Alam Dec 22 '19 at 11:16
@Volodymyr Lisniak thank you – Rasik Miyani Jan 27 '20 at 06:05
config: { mixins: { 'mage/collapsible': { 'Namespace_ModuleName/js/mage/collapsible-mixin': true } } } – Manish Goswami Aug 14 '20 at 06:52
Namespace_ModuleName in the mixin after that it will work ! – Manish Goswami Aug 14 '20 at 06:53
@ManishGoswami It is a global file. You don't need to put it in a specific module. – Volodymyr Lisniak Aug 16 '20 at 06:51
Hi @VolodymyrLisniak we are facing same issue in the Magento2.3.5 P2 B2B followed same steps not working could you please advise me thanks – Nagaraju Kasa Jun 11 '21 at 14:21

score 2 · Answer 2 · answered Dec 20 '19 at 10:56

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.

score 0 · Answer 3 · answered Dec 18 '19 at 11:39

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

score 0 · Answer 4 · answered Jun 20 '20 at 11:25

0

Update for version 2.3.5

As per this pr/issue, https://github.com/magento/magento2/pull/23862/files

now it is already embedded and fixed within magento core code itself.

Thanks.

answered Jun 20 '20 at 11:25

Shashank Bhatt

342
1
4
17

Hi @shashank we are facing same issue on our Magento2.3.5 P2 version can u help me? – Nagaraju Kasa Jun 11 '21 at 14:20
Hi, just change in collapsible library as suggested in above pr and it will be fixed. – Shashank Bhatt Jun 11 '21 at 16:34

score -1 · Answer 5 · answered Nov 29 '19 at 10:46

-1

override and comment the below js code in collapsible.js

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

this was worked for me....

answered Nov 29 '19 at 10:46

Bhupendra Mehra

1

Magento 2.3.3 tab jumping on Top

5 Answers5

Linked