jquery - jQuery Smooth Scroll 使页面跳转与标签被点击

问题描述

目前使用 Easy Smooth Scroll Links 插件设计一个 Wordpress 网站。我还将 SiteOrigin Page Builder 与 Tabs 小部件一起使用。当您单击不同的选项卡时，选项卡小部件会更改地址栏中的 URL。示例： example.com/#tab1 ， example.com/#tab2 等。我的问题是当我单击选项卡时页面会跳转。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.

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

            <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 中运行良好。我已经清除了几次缓存以确保不是那样。

任何帮助，将不胜感激。谢谢！

标签： jquerytabssmooth-scrolling

jquery - jQuery Smooth Scroll 使页面跳转与标签被点击

问题描述

解决方案

推荐阅读