jQuery Smooth Scroll 使点击标签页跳转

Question

目前正在使用 Easy Smooth Scroll Links 插件设计 Wordpress 网站。我还将 SiteOrigin Page Builder 与 Tabs 小部件一起使用。当您单击不同的选项卡时，选项卡小部件会更改地址栏中的 URL。示例：example.com/#tab1、example.com/#tab2 等。我的问题是当我单击选项卡时页面跳转。但仅当标签位于屏幕中间但不在屏幕顶部或屏幕底部时才会发生。

这是平滑滚动插件使用的代码：

            <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; 
?>

如您所见，我在锚点或哈希上添加了一些豁免项，我不希望平滑滚动操作发生。它在 Firefox 中工作正常，但由于某种原因在 Chrome 中不工作。我已经清除缓存几次以确保它不是那个。

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

禁用 Easy Smooth Scroll Links 插件中的 "Enable Scrolling from One Page to Another" 设置应该可以解决该问题。或者，考虑使用不存在此问题的 Page Scroll to ID 插件。

jQuery Smooth Scroll 使点击标签页跳转

jQuery Smooth Scroll making the page jump with tab is clicked

jquery

tabs

smooth-scrolling