Anchor link to a custom tab

Hi @saimoon,

I see what you’re talking about. First, I do want to say that our plugin doesn’t provide any styles or scripts to manage this. The script you are using generally works, but it’s entirely dependent on your theme.

To address the scroll position, you can do something like this:

const container = tab.parentElement.getBoundingClientRect();

jQuery('html, body').animate({
    scrollTop: container.top
}, 300);

That will get the physical position on screen of the “tab list” element and use that to determine the scroll position.

However, and I can’t be sure this will happen if you replace what you have, but in my testing there was some other script causing it to scroll back and forth to the top of the page a few times before settling on the correct position. I didn’t find anything immediately, but there are a few minified scripts in your theme that deal with scrolling. You should probably investigate those if you see this behavior as well.

Let me know if that helps,
Jon

Dear Jon,

Thank you for your kind feedback & sorry for my ignorance. Should i replace below code with the one you provided?

// Scroll to tab
        jQuery('html, body').animate({
            scrollTop: tab.parentElement.offsetTop
        }, 300);

I am not that much experienced in JS.

Thank You.
Saimoon

Dear Jon,

I added the code as below,

document.addEventListener('click', function (event) {
    if (event.target.hash && event.target.hash.includes('tab-')) {
        // Ignore other click events
        event.preventDefault();

        // Set up variables
        const tabName = event.target.hash.replace('#tab-', '');
        const tabLink = document.getElementById('tab-title-' + tabName)
        const tab = document.getElementById('tab-' + tabName);

        // Click on tab title to display tab
        tabLink.getElementsByTagName('a')[0].click();

        // Scroll to tab
        const container = tab.parentElement.getBoundingClientRect();

         jQuery('html, body').animate({
         scrollTop: container.top
         }, 300);
    }
})

Which made it work. But when i click on any other tabs (say description / shipping policy) the scrolling effects continue to occur. Is it normal or can i remove this unnecessary scrolling movement?

Thanks
Saimoon

Hi @saimoon,

That other scrolling movement is coming from elsewhere in your theme. I wasn’t able to easily track it down using browser tools, but you might have better luck (as you have access to the files).

You could also just start blocking JS files from enqueueing (if there are several) until you track down the culprit, then start looking into modifying it from there.

Let me know if that helps,
Jon

Dear Jon,

Thank you for your response. I have only one js file in my site for this tab openning only. If I delete the file, these excess scrolling stops including the doa tab opening. For your better understanding, I am uploading the whole js file code here.

<script type="text/javascript">
/* Add your JavaScript code here.

If you are using the jQuery library, then don't forget to wrap your code inside jQuery.ready() as follows:

jQuery(document).ready(function( $ ){
    // Your code in here
});

--

If you want to link a JavaScript file that resides on another server (similar to
<script src="https://example.com/your-js-file.js"></script>), then please use
the "Add HTML Code" page, as this is a HTML code that links a JavaScript file.

End of comment */ 

document.addEventListener('click', function (event) {
    if (event.target.hash && event.target.hash.includes('tab-')) {
        // Ignore other click events
        event.preventDefault();

        // Set up variables
        const tabName = event.target.hash.replace('#tab-', '');
        const tabLink = document.getElementById('tab-title-' + tabName)
        const tab = document.getElementById('tab-' + tabName);

        // Click on tab title to display tab
        tabLink.getElementsByTagName('a')[0].click();

        // Scroll to tab
        const container = tab.parentElement.getBoundingClientRect();

		jQuery('html, body').animate({
    	scrollTop: container.top
		}, 300);
    }
})
</script>

I did not added any code inside my theme function.php. Do I need to?

If you need a temporary access to my site, I can provide a temporary admin account if it helps.

Thanks

Hi @saimoon,

According to the Firefox developer tools, your homepage includes 73 JS files. Three of the files from the oceanwp theme stand out as being possibly relevant:

1. ow-infinite-scroll
2. scroll-effect
3. theme

I’m sorry, but digging through all of those script files is outside of the support I can provide. The script that we created together to scroll to the tabs is working, but some other script is presumably reacting to scroll events and performing its own actions. That is the script that you need to find and remove/disable.

Jon

In that case, can I specify only the exact tab name I am using? #tab-doa-policy
In that way, this js code will only work for that specific tab.

I f i want to do so, what should I change?

Saimoon

Hi @saimoon,

You could update this line to match the exact tab title:

if (event.target.hash && event.target.hash.includes('tab-')) {

Instead of 'tab-' it would be the full name of the tab.

Jon

Thanks, Initially, it fixed the scrolling issue for other 2 tabs. Only clicking on tab-doa-policy scrolls up & down, but clicking other tabs doesn’t cause the scrolling any more.

Thank You Jon

Dear Jon,

I disabled all the js file of ocean WP from scripts & Style section. Still when i click the DOA policy tab it scrolls up & down.

Can you recheck the homepage for any other js file responsible for the conflict?

Hi @saimoon,

Instead of digging through all of the minified JS files in your theme, you’re probably better off trying to change the method of scrolling to avoid whatever conflict is occurring. This seems to work:

jQuery([document.documentElement, document.body]).animate({
    scrollTop: jQuery(tab.parentElement).offset().top - 100
}, 300);

Alternatively, you could use element.scrollIntoView() or one of the other methods of scrolling the page using JS.

Jon

Dear Jon,

Many many thanks. The problem seems to be fixed by your last bit of code. I am changing the topic status to resolved. Thanks again for your kind support.