Smooth scroll JS prevents hrefs with hash to work properly in some cases

[mediaessenz]

Bug Report

Description

Smooth scroll JS of version bootstrap_package v13.0.1 prevents hrefs with hash to work properly in some cases.

Steps to Reproduce

1. Create a content element with a link pointing to a specific content element of another page.
2. Go to the frontend page view and click the link
3. Nothing happens (the browser do not load the link target

Expected behavior

Load the page of the link target and scroll to the selected content element.

Actual behavior

The link is not working

Versions

bootstrap_package 13.0.1
TYPO3 11.5.25
PHP 8.1

Fix

The reason is the JS css selector who attaches an eventlistener containing a preventDefault command.
This prevents the link from working.

The current selector looks like this:

const ankers = document.querySelectorAll('a[href*="#"]:not([href^="http"]):not([href$="#"])');

and should be changed to:

const ankers = document.querySelectorAll('a[href^="#"]:not([href$="#"]):not([data-bs-toggle])');

Additional the following code uses some old dataset properties:

element.dataset.toggle === undefined  && element.dataset.slide === undefined) 

Since bootstrap 5 all data attributes got a bs-prefix. So this code part should be changed to:

element.dataset.bsToggle === undefined  && element.dataset.bsSlide === undefined) 

Since this condition could also be prevent by adding it to the selector, the whole js could look like this:

window.addEventListener('DOMContentLoaded', function () {

    /*
     * Smooth Scroll
     */
    const ankers = document.querySelectorAll('a[href^="#"]:not([href$="#"]):not([data-bs-toggle]):not([data-bs-slide])');
    ankers.forEach(function (anker) {
        anker.addEventListener('click', function (event) {
            const element = event.currentTarget;
            if (location.pathname.replace(/^\//, '') === element.pathname.replace(/^\//, '')
                && location.hostname === element.hostname) {
                let target = document.querySelectorAll(element.hash.replace(/(:|\.|\[|\]|,|=|\/)/g, '\\$1'));
                target = target.length && target || document.querySelectorAll('[name=' + element.hash.slice(1) + ']');
                if (target.length) {
                    event.preventDefault();
                    let targetOffset = target[0].getBoundingClientRect().top + window.scrollY;
                    const navbar = document.querySelector('.navbar-fixed-top');
                    if (navbar && targetOffset !== 0) {
                        targetOffset -= navbar.getBoundingClientRect().height;
                    }
                    scroll({
                        top: targetOffset,
                        behavior: "smooth"
                    });
                    return false;
                }
            }
        });
    });

    /*
     * Scroll to top
     */
    document.querySelector('.scroll-top').addEventListener('click', function (event) {
        event.currentTarget.blur();
    });

    window.addEventListener('scroll', function (event) {
        if (window.scrollY > 300) {
            document.querySelector('.scroll-top').classList.add('scroll-top-visible');
        } else {
            document.querySelector('.scroll-top').classList.remove('scroll-top-visible');
        }
    });

});

[danaron]

Hi mediaessenz
I can confirm this bug and think that your fix is great. Thanks for your work. Hope that it will be implemented in the next release.
Best regards Danaron