It appears that this module conflicts with bootstrap 4 tabs like here:

https://codepen.io/jek/pen/BoWNRy

There is a similar issue with "Scroll to destination anchors" which I referenced.

A solution is probably similar: exclude <a href="#"> elements that contains "data-toggle" attributes.

Comments

demonde created an issue. See original summary.

ewout goosmann’s picture

ewout goosmann
Primary language Dutch
commented

Hey demonde,

Thank you for reporting this bug and a solution.

I've quickly scanned the code with your solution in mind and it looks like that your solutions will work. Maybe it is even better to exclude all <a href="#"> (without the check for "data-toggle") if there is no string after the #, because if there is no string, there's no ID and therefore the scrolling should never be triggered.

About the deletion: I saw that your codepen example contains a string after the #. I just saw the same bug with horizontal tabs from the field_group module. They produce the following code:

<li class="horizontal-tab-button horizontal-tab-button-0 first" tabindex="-1">
<a href="#general">
<strong>General</strong>
<span class="summary">
</span>
</a>
</li>

Maybe there should be a general check for [role="tablist"] or something similar.

Raman Starshykh’s picture

Raman Starshykh commented
Issue tags: +epam-contrib-2019.03

ewout goosmann’s picture

ewout goosmann
Primary language Dutch
commented

I've added the solution from the related issue (#2996612: Avoid smooth scroll stda conflict with bootstrap link-based animations) to the dev version.

Can you let me know if that solves your bug?

ewout goosmann’s picture

ewout goosmann
Primary language Dutch
commented
Status: Active » Needs review
demonde’s picture

demonde commented

Maybe I did sth wrong applying the patch but in my case it does not work. Clicking the tab title sends me to the page top.

This is my tab title html:

<a href="#tab-views-bootstrap-block" class="nav-link" data-toggle="tab">Tab title</a>

Maybe animated scroll should also not apply if the target is hidden like in this case the tab content.

  • Ewout Goosmann committed ac5d71e on 8.x-1.x 
    Fixed small bug with anonymous users (missing library) and Issue #...
ewout goosmann’s picture

ewout goosmann
Primary language Dutch
commented

Hi demonde,

I changed the selector in the general check, but forgot it in a foreach loop. I've committed the correct code (tested with your tab title html) to the dev version of this module. Hopefully your bug will be solved with this.

rodman1980’s picture

rodman1980 commented
Issue tags: -epam-contrib-2019.03
demonde’s picture

demonde commented

I installed the dev and it works for me.

Thanks for this module. I was missing it since years because "Scroll to destination anchors" was lacking many options.

ewout goosmann’s picture

ewout goosmann
Primary language Dutch
commented

Nice to hear that the dev version works! I will release it in the 8.x-1.1 version.

And good to know that I've created some options that were missed by others.

If you are missing some other options, just create a feature request and I will consider to implement it.

ewout goosmann’s picture

ewout goosmann
Primary language Dutch
commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

demonde’s picture

demonde commented

The problem reoccurs, since bootstrap 5 has changed any data- attribute to data-bs-.

see https://github.com/twbs/bootstrap/pull/31827

Shall I open a new issue?

demonde’s picture

demonde commented

As far as I can see only :not([data-toggle]) has to be replaced with :not([data-toggle]):not([data-bs-toggle]) in both .js files.