jQuery Плавная прокрутка, при нажатии на которую открывается страница с вкладкой. - PullRequest
Новая
       26

jQuery Плавная прокрутка, при нажатии на которую открывается страница с вкладкой.

0 голосов
/ 12 января 2020

В настоящее время разрабатывает сайт Wordpress с помощью плагина Easy Smooth Scroll Links. Я также использую SiteOrigin Page Builder с виджетом «Вкладки». Виджет «Вкладки» изменяет URL-адрес в адресной строке при нажатии на разные вкладки. Пример: example.com/#tab1, example.com/#tab2 et c. Моя проблема заключается в том, что страница прыгает, когда я нажимаю на вкладки. Но происходит только в том случае, если вкладки находятся в середине экрана, но не в верхней или нижней части экрана.

Вот код, который использует плагин с плавной прокруткой: 

            <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 по некоторым причинам. Я очищал кэш несколько раз, чтобы убедиться, что это не так.

Любая помощь будет принята с благодарностью. Спасибо!

1 Ответ

0 голосов
/ 19 февраля 2020

Отключение параметра «Включить прокрутку с одной страницы на другую» в плагине «Easy Smooth Scroll Links» должно решить эту проблему. В качестве альтернативы рассмотрите возможность использования плагина Page Scroll to ID , который не страдает от этой проблемы.

...