I’m implementing smooth scrolling functionality on my webpage. When a category button is clicked, the page scrolls to the corresponding section smoothly. This works perfectly on desktop browsers and for forward scrolling on mobile devices, but it fails to scroll backward correctly on mobile devices. Here is the relevant part of my code:

window.addEventListener("click", (event) => {
    const categoryButton = event.target.classList.contains("cmp-css-category");
    if (categoryButton) {
        event.preventDefault(); 
        const targetId = event.target.getAttribute('href').slice(1); 
        const targetCard = document.getElementById(targetId);
        if (targetCard) {
            const rect = targetCard.getBoundingClientRect();
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const scrollPosition = rect.top + scrollTop;
            window.scrollTo({
                top: scrollPosition,
                behavior: 'smooth'
            });
        }
    }
});

Problem Description

Forward Scrolling: When clicking on a category button to scroll down to a section, it works as expected.
Backward Scrolling: When clicking on a category button to scroll back up to a previous section, the scroll behavior is inconsistent and doesn’t scroll to the correct position. This issue is specifically on mobile devices.

Verified Scroll Position Calculation:

const rect = targetCard.getBoundingClientRect();
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollPosition = rect.top + scrollTop;

window.scrollTo({
    top: scrollPosition,
    behavior: 'smooth'
});

Checked Consistency Across Devices: Tested the code on desktop browsers (Chrome, Firefox, Safari) where it works fine.

What Were You Expecting?
I expected the smooth scrolling functionality to work consistently on both desktop and mobile devices, allowing the page to scroll smoothly to the target section regardless of the direction (both forward and backward scrolling).