Sxa Tab is causing autoscrolling while redirecting to that page

Question

I am using Sitecore 9.3 SXA, wherefrom main page on button click I am redirecting to the video page where we have SXA Tab component below the video. Upon redirecting, the page is getting scrolled to the bottom where the tab is.

I have debugged the tab js, component-tabs, found that when if condition in the below code is hitting, the page is getting auto scrolled to the component as the tab-heading is having some scroll height and scroll width property. If I try by changing or removing the "tab-scrollable" class in the js, the tabs are not functioning.

api.initInstance = function(component) {
   var $tabModule = component.find(".tabs-inner");
   if (component.hasClass("tabs-scrollable")) {
       tabsScrollable(component);
      } 

Is there any way to restrict the auto-scroll?

Thanks in advance

Answer 1

Got the fix for my issue. Basically in original js for tabs line number 247 was causing the auto scroll. So added an unique class ('dummy-focus' here) in the top container of page and added the script

if(document.getElementsByClassName('dummy-focus')[0])
        {
            const element = document.getElementsByClassName('dummy-focus')[0];
            element.scrollIntoView();
        }

after $tabNav.first("li").focus(); (line 247)

Answer 2

The above solution from Tabbuu is not supported by safari, using code from here https://stackoverflow.com/questions/45098593/mobile-safari-scrollintoview-doesnt-work I was able to update it to be supported by safari as follows:

const element = document.getElementsByClassName('dummy-focus')[0];
let scrollTop = window.pageYOffset || element.scrollTop

const finalOffset = element.getBoundingClientRect().top + scrollTop

window.parent.scrollTo({
    top: finalOffset,
    behavior: 'instant'
})    

If this doesn't work add a polyfill for preventScroll from here: https://github.com/calvellido/focus-options-polyfill/blob/master/index.js Then update the component-tabs.js to use prevent scroll as so

$tabNav.first("li").focus({ preventScroll: true });