jQuery Smooth Scroll making the page jump with tab is clicked

Question

Currently designing a Wordpress site using the Easy Smooth Scroll Links plugin. I am also using the SiteOrigin Page Builder with the Tabs widget. The Tabs widget changes the URL in the address bar when you click on different tabs. Example: example.com/#tab1 , example.com/#tab2 etc. My issue is that the page jumps around when I click on the tabs. But only happens if the tabs are in the middle of the screen but not at the top of the screen or bottom of the screen.

Here is the code the smooth scroll plugin uses:

            <script type="text/javascript">
            jQuery.noConflict();
            (function($){

                var jump=function(e)
                {
                   if (e){
                       var target = $(this).attr("href");
                   }else{
                       var target = location.hash;
                   }

                    var scrollToPosition = $(target).offset().top - 90;

                   $('html,body').animate({scrollTop: scrollToPosition },900 ,'easeInSine' );

                }

                $('html, body').hide()

                $(document).ready(function()
                {
                    $("area[href*=\\#],a[href*=\\#]:not([href=\\#]):not([href^='\\#tab']):not([href^='\\#quicktab']):not([href^='\\#pane']):not([href^='#dryer']):not([href^='#pet']):not([href^='#tile']):not([href='#upholstery-cleaning']):not([href='#pet-odor-removal']):not([href='#tile-grout-cleaning'])").bind("click", jump);

                    if (location.hash){
                        setTimeout(function(){
                            $('html, body').scrollTop(0).show()
                            jump();
                        }, 0);
                    }else{
                      $('html, body').show()
                    }
                });

            })(jQuery);
        </script>
<?php  } else {  ?>
        <script type="text/javascript">
            jQuery.noConflict();
            (function( $ ) {
                $(function() {
                    // More code using $ as alias to jQuery
                    $("area[href*=\\#],a[href*=\\#]:not([href=\\#]):not([href^='\\#tab']):not([href^='\\#quicktab']):not([href^='\\#pane'])<?php if($essl_exclude_begin) echo $essl_exclude_begin; ?><?php if($essl_exclude_match) echo $essl_exclude_match; ?>").click(function() {
                        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                            var target = $(this.hash);
                            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                            if (target.length) {
                            $('html,body').animate({
                            scrollTop: target.offset().top - <?php if (get_option('essl_offset')!='') {echo get_option('essl_offset');} else {echo '20';} ?>  
                            },<?php if (get_option('essl_speed')!='') {echo get_option('essl_speed');} else {echo '900';} ?> ,'<?php echo  get_option('essl_easing','easeInQuint');?>');
                            return false;
                            }
                        }
                    });
                });
            })(jQuery); 
        </script>               
            <?php } 
    }                   
}   
endif; 
?>

As you can see I've added some exemptions on anchors or hashes I do not want the smooth scroll action to happen on. It works fine in Firefox but not in Chrome for some reason. I've cleared cache a few times to ensure it isn't that.

Any help would be appreciated. Thank you!

Answer 1

Disabling "Enable Scrolling from One Page to Another" setting in Easy Smooth Scroll Links plugin should resolve the issue. Alternatively, consider using the Page Scroll to ID plugin which doesn't suffer from this issue.