Anchor Link to Specific Tab - Auto Scrolling Not Working

snyderonlinemarketing · March 29, 2025, 5:08pm

I’ve attached a video showing the issue.

website page in question: https://lcr-dev.thesnydersite.com/animal-adoption/

prakash_s · March 29, 2025, 8:00pm

Thanks for writing to us.

To help you with your concerns we need to check your setting, I would request please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

WordPress Login URL
Admin-level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

snyderonlinemarketing · March 31, 2025, 2:12pm

The common issues do not seem to be present here from my troubleshooting. I’m sure it is something minor I have overlooked. I added the WP login credentials. I’m looking forward to your input. Thank you!

Ismael · March 31, 2025, 2:38pm

Thank you for the update.

The video was not available when we checked. Are you trying to make the page scroll when the “See Animals for Adoption” button is clicked? If so, we added this code in the Custom Code > Page JS field.

document.addEventListener("DOMContentLoaded", () => {
    const button = document.querySelector('a[href="#dogs"]');
    
    button.addEventListener("click", (event) => {
        event.preventDefault();
        const targetElement = document.querySelector('[data-x-toggle-hash="dogs"]');
        
        if (targetElement) {
            targetElement.scrollIntoView({ behavior: "smooth" });
        }
    });
});

Please make sure to purge the SG cache before checking the page.

Best regards.

snyderonlinemarketing · March 31, 2025, 4:41pm

On the homepage, there is a section of tabs (7 total) that match the type of animal this animal rescue works with. In each tab there is a button with the text that says "MEET OUR {ANIMAL TYPE} ". Let’s take the “FARM” tab as our example. We need the following to happen:
A user navigates to the “FARM” tab on the homepage or elsewhere on the site. When they click to go to https://lcr-dev.thesnydersite.com/animal-adoption/#farm

the following happens:

the “FARM” tab is set on the animal adoption page as the tab that is open
the user is taken to that anchor tag/link in their browser

Ismael · April 1, 2025, 12:08pm

Thank you for the clarification. We adjusted the script a bit. The scroll will happen after the page has finished loading, and you may notice a slight delay. If you need more help with this kind of modification, we recommend trying out our One service.

This is the updated script:

document.addEventListener("DOMContentLoaded", () => {
    function xScrollToHash(hash) {
        if (!hash) return;
        
        const targetElement = document.querySelector(`[data-x-toggle-hash="${hash}"]`);
        if (targetElement) {
            targetElement.scrollIntoView({ behavior: "smooth" });
        }
    }


    if (window.location.hash) {
        setTimeout(() => {
            xScrollToHash(window.location.hash.substring(1));
        }, 3000);
    }

    document.querySelectorAll('a[href*="#"]').forEach(button => {
        button.addEventListener("click", (event) => {
            const url = new URL(button.href);
            const hash = url.hash.substring(1); 

            if (hash) {
                event.preventDefault();
                xScrollToHash(hash);
            }
        });
    });
});

Please make sure to purge the cache before checking.