Поддержка Проблемы и решения Пропала плавная прокрутка к якорям

  • Решено kovok

    (@kovok)


    В общем, сделал лендинг и на GitHub он работает нормально. То есть, в меню пункты «work» и «contact» плавно скролятся к своим якорям. А вот на WP это уже не работает. Вордпресс установлен локально на комп и поэтому ссылку не знаю как дать. Вот ссылка на гитхаб: видно, что плавная прокрутка к якорям работает. . В файле functions.php путь адреса к jquery прописал, но видимо как-то коряво. А может быть какая-то другая причина? Могу выложить скриншот куска кода, где прописаны пути в файле functions.php . Ну или вот так:

    add_filter('show_admin_bar', '__return_false');
       
       define('Z_THEME_ROOT', get_template_directory_uri() );
       define('Z_CSS_DIR', Z_THEME_ROOT . '/css');
       define('Z_JS_DIR', Z_THEME_ROOT . '/js');
       define('Z_IMG_DIR', Z_THEME_ROOT . '/img');
    
       add_action('wp_enqueue_scripts', function() {
       wp_enqueue_style( 'theme', get_stylesheet_uri() );
       wp_enqueue_style('style', Z_CSS_DIR . '/style.css');
       wp_enqueue_style('progresscircle', Z_CSS_DIR . '/progresscircle.css');
    
       wp_deregister_script( 'jquery' );
       wp_enqueue_script('perehod', Z_JS_DIR . '/perehod.js');
       wp_enqueue_script('script', Z_JS_DIR . '/script.js');
       wp_enqueue_script('progresscircle', Z_JS_DIR . '/progresscircle.js');
       wp_enqueue_script('jquery', Z_JS_DIR . '/jquery-3.3.1.min.js');
    
       wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
    	wp_enqueue_script( 'jquery' );

    В предпоследней строке пытаюсь указать линк на ресурс. Правильно ли?

Просмотр 15 ответов — с 1 по 15 (всего 27)
  • т.е. без изобретения своего собственного костыльного лисапеда не обойтись?
    https://ru.wordpress.org/plugins/search/Smooth+Scroll/

    Модератор Юрий

    (@yube)

    $(document).ready(function () {
    См. jQuery в режиме noConflict
    (я не утверждаю, что в этом причина неработы, но все-таки!)

    
    wp_enqueue_script('jquery', Z_JS_DIR . '/jquery-3.3.1.min.js');
    
       wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
    	wp_enqueue_script( 'jquery' );
    

    Зачем дважды?

    в wordpress свой jquery и не надо его отрубать в пользу сторонних cdn.
    по причине того, что родной jquery работает в noConflict режиме.
    соответственно, подключив jquery из cdn — у вас половина плагинов перестанет работать.

    а вообще, откройте консоль браузера — там наверняка найдете причину, по которой у вас ничего не работает.

    а вообще, откройте консоль браузера — там наверняка найдете причину, по которой у вас ничего не работает.

    так в том и дело, что Uncaught ReferenceError: $ is not defined эта ошибка, как я понимаю, из-за того, что jquery не отрабатывает.

    т.е. без изобретения своего собственного костыльного лисапеда не обойтись?

    так учусь я. Копипастом знаний не добавить.

    Вы ищите знание «как бы сделать то, что уже до меня сделали, вместо того чтобы просто поставить плагин»?

    Модератор Юрий

    (@yube)

    из-за того, что jquery не отрабатывает.

    Из-за того, что jQuery в режиме noConflict. См. ссылку выше.

    Из-за того, что jQuery в режиме noConflict. См. ссылку выше.

    Юрий, я ссылкой воспользовался и исправил, как там указано, однако нет результата. Та же ошибка,
    perehod.js?ver=5.1:1 Uncaught ReferenceError: jQuery is not defined только не символ $, а JQuery теперь впереди.

    • Ответ изменён 2 нед., 3 дн. назад пользователем  kovok.
    • Ответ изменён 2 нед., 3 дн. назад пользователем  kovok.
    Модератор Юрий

    (@yube)

    только не символ $, а JQuery теперь впереди.

    Видимо, нарушен порядок загрузки скриптов. Для предотвращения такой беды у wp_enqueue_script есть параметр зависимостей.

    Модератор Sergey Biryukov

    (@sergeybiryukov)

    Live and Learn

    только не символ $, а JQuery теперь впереди.

    Попробуйте убрать:

    
    wp_deregister_script( 'jquery' );
    ...
    wp_enqueue_script('jquery', Z_JS_DIR . '/jquery-3.3.1.min.js');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
    

    Оставить и перенести выше (до подключения perehod.js):

    
    wp_enqueue_script( 'jquery' );
    

    Если скрипт требует jQuery — имеет смысл указать это в зависимостях третьим параметром:

    
    wp_enqueue_script( 'perehod', Z_JS_DIR . '/perehod.js', array( 'jquery' ) );
    

    Тогда wp_enqueue_script( 'jquery' ) отдельно можно и не писать, но хуже не будет.

    Попробуйте убрать:

    Оставить и перенести выше (до подключения perehod.js):

    эти манипуляции ничего не дали. Файл perehod.js я переписал без применения jquery. Вроде перестал ругаться на этот файл. Остался только один файл написанный на JQuery. Точнее одна функция. Может кто-то подскажет как вот эту функцию переписать на чистом JS:

    
    (function( $ ) {
    
        $.fn.circlechart = function() {
            this.each(function() {
                var percentage = $(this).data("percentage");
                var inner_text = $(this).text();
                $(this).html(makesvg(percentage, inner_text));
            });
            return this;
        };
    
    }( jQuery ));
    
    $(function () {
    
      $('.circlechart').circlechart();
    
    });
    
    jQuery(function () {
    
      jQuery('.circlechart').circlechart();
    
    });
    
    Модератор Sergey Biryukov

    (@sergeybiryukov)

    Live and Learn

    Ещё можно в начале скрипта написать: var $ = jQuery; и больше ничего не переделывать — должен быть тот же эффект.

    Спасибо всем, кто откликнулся. Пока вопрос не решил. Пойду еще гуглить.

    Модератор Sergey Biryukov

    (@sergeybiryukov)

    Live and Learn

    С подобными проблемами решение обычно сводится к двум шагам:

    • Убедиться, что скрипты в коде страницы загружаются в правильном порядке, т.е. сначала библиотеки типа jQuery, потом скрипты, которые их используют. При необходимости — поменять местами строки или правильно указать зависимости.
    • Убедиться, что скрипты адаптированы для jQuery в режиме noConflict, т.е. переменная $ указывает на объект jQuery.

    Если это не помогло — значит, допущены другие ошибки, которые проще увидеть, когда сайт размещён на хостинге, а не на локальном сервере.

Просмотр 15 ответов — с 1 по 15 (всего 27)