Не можете заставить scrollify.js работать?
Я пытаюсь использовать scrollify.js на своем одностраничном веб-сайте, но не могу заставить его работать?
У меня есть следующий html, header.php для загрузки scrollify и мой js в моем файле custom.js.
Что я делаю неправильно?
Заранее спасибо?
HTML
<?php get_header(); ?>
<div id="sections_all">
<div id="section_1">
<section class='section'>
<div class="section-1-container">
<h1 id="section_1">
<span style='font-size: 20vh;'>Sell your old <br>Garrard</span>
</h1>
<h2 id="section_1">
Looking to sell your turntable? We buy your used Garrard 301 & 401 record players.
</h2>
</div>
</section>
</div>
<div id="section_2">
<section class='section'>
<div class="section-2-container">
<!--<p class="contact-text">Contact Us</p>-->
<?php echo do_shortcode('[contact-form-7 id="66" title="Contact Us"]'); ?>
</div>
</section>
</div>
<div id="section_3">
<section class='section'>
<div class="section-3-container">
<h1 id="section_3">
Sell your old turntable
</h1>
</div>
</section>
</div>
<div id="section_4">
<section class='section'>
<div class="section-4-container">
<h1 id="section_4">
Sell your old turntable
</h1>
</div>
</section>
</div>
</div>
</div>
<?php get_footer(); ?>
Заголовок PHP
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<meta name="viewport" content="width-device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="<?php bloginfo('description'); ?>">
<title>SellGarrard301</title>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1.0.17/jquery.scrollify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1.0.17/jquery.scrollify.min.js"></script>
<?php wp_head(); ?>
</head>
<body>
<div class="container">
<header class="header-wrapper">
<p class="logo-text">Sell Garrard.com</p>
<div class="hamburger-helper">
<div id="menu-toggle">
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<div id="cross">
<span></span>
<span></span>
</div>
</div>
</div>
<nav class="menu-hide">
<?php
wp_nav_menu( array(
'theme_location' => 'header_menu',
'container' => '',
'container_class' => 'menu-hidden',
'menu_class' => 'menu-hide',
'menu_id' => 'header_menu',
) );
?>
</nav>
</header>
<!-- end of header start of main content -->
Пользовательская функция JS
$(document).ready(function(){
$(function() {
$.scrollify({
section: ".section",
});
});
});
Все файлы и сценарии загружаются при проверке, но я не могу найти информацию о том, как заставить его работать?
ОБНОВЛЕННЫЕ ОШИБКИ КОНСОЛИ:
jquery.scrollify.js:45 Uncaught ReferenceError: jQuery is not defined
at jquery.scrollify.js:45
at jquery.scrollify.js:47
(anonymous) @ jquery.scrollify.js:45
(anonymous) @ jquery.scrollify.js:47
jquery.scrollify.min.js:1 Uncaught ReferenceError: jQuery is not defined
at jquery.scrollify.min.js:1
at jquery.scrollify.min.js:1
(anonymous) @ jquery.scrollify.min.js:1
(anonymous) @ jquery.scrollify.min.js:1
jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1
jquery-3.2.1.js?ver=4.8.3:3860 jQuery.Deferred exception: $.scrollify is not a function TypeError: $.scrollify is not a function
at HTMLDocument.<anonymous> (http://localhost/sellgarrard/SellGarrard/wp-content/themes/SellGarrard301/JS/custom.js?ver=4.8.3:134:7)
at j (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js?ver=4.8.3:2:26911)
at Object.add [as done] (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js?ver=4.8.3:2:27220)
at n.fn.init.n.fn.ready (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js?ver=4.8.3:2:29326)
at new n.fn.init (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js?ver=4.8.3:2:24411)
at n (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js?ver=4.8.3:2:405)
at HTMLDocument.<anonymous> (http://localhost/sellgarrard/SellGarrard/wp-content/themes/SellGarrard301/JS/custom.js?ver=4.8.3:133:1)
at mightThrow (http://localhost/sellgarrard/SellGarrard/wp-content/themes/SellGarrard301/JS/jquery-3.2.1.js?ver=4.8.3:3583:29)
at process (http://localhost/sellgarrard/SellGarrard/wp-content/themes/SellGarrard301/JS/jquery-3.2.1.js?ver=4.8.3:3651:12) undefined
jQuery.Deferred.exceptionHook @ jquery-3.2.1.js?ver=4.8.3:3860
process @ jquery-3.2.1.js?ver=4.8.3:3655
setTimeout (async)
(anonymous) @ jquery-3.2.1.js?ver=4.8.3:3689
fire @ jquery-3.2.1.js?ver=4.8.3:3317
fireWith @ jquery-3.2.1.js?ver=4.8.3:3447
fire @ jquery-3.2.1.js?ver=4.8.3:3455
fire @ jquery-3.2.1.js?ver=4.8.3:3317
fireWith @ jquery-3.2.1.js?ver=4.8.3:3447
ready @ jquery-3.2.1.js?ver=4.8.3:3920
completed @ jquery-3.2.1.js?ver=4.8.3:3930
jquery-3.2.1.js?ver=4.8.3:3869 Uncaught TypeError: $.scrollify is not a function
at HTMLDocument.<anonymous> (custom.js?ver=4.8.3:134)
at j (jquery.js:3094)
at Object.add [as done] (jquery.js:3140)
at n.fn.init.n.fn.ready (jquery.js:3373)
at new n.fn.init (jquery.js:2816)
at n (jquery.js:76)
at HTMLDocument.<anonymous> (custom.js?ver=4.8.3:133)
at mightThrow (jquery-3.2.1.js?ver=4.8.3:3583)
at process (jquery-3.2.1.js?ver=4.8.3:3651)
(anonymous) @ custom.js?ver=4.8.3:134
j @ jquery.js:3094
add @ jquery.js:3140
n.fn.ready @ jquery.js:3373
n.fn.init @ jquery.js:2816
n @ jquery.js:76
(anonymous) @ custom.js?ver=4.8.3:133
mightThrow @ jquery-3.2.1.js?ver=4.8.3:3583
process @ jquery-3.2.1.js?ver=4.8.3:3651
setTimeout (async)
jQuery.readyException @ jquery-3.2.1.js?ver=4.8.3:3868
(anonymous) @ jquery-3.2.1.js?ver=4.8.3:3888
mightThrow @ jquery-3.2.1.js?ver=4.8.3:3583
process @ jquery-3.2.1.js?ver=4.8.3:3651
setTimeout (async)
(anonymous) @ jquery-3.2.1.js?ver=4.8.3:3689
fire @ jquery-3.2.1.js?ver=4.8.3:3317
fireWith @ jquery-3.2.1.js?ver=4.8.3:3447
fire @ jquery-3.2.1.js?ver=4.8.3:3455
fire @ jquery-3.2.1.js?ver=4.8.3:3317
fireWith @ jquery-3.2.1.js?ver=4.8.3:3447
process @ jquery-3.2.1.js?ver=4.8.3:3671
setTimeout (async)
(anonymous) @ jquery-3.2.1.js?ver=4.8.3:3689
fire @ jquery-3.2.1.js?ver=4.8.3:3317
fireWith @ jquery-3.2.1.js?ver=4.8.3:3447
fire @ jquery-3.2.1.js?ver=4.8.3:3455
fire @ jquery-3.2.1.js?ver=4.8.3:3317
fireWith @ jquery-3.2.1.js?ver=4.8.3:3447
ready @ jquery-3.2.1.js?ver=4.8.3:3920
completed @ jquery-3.2.1.js?ver=4.8.3:3930
1 ответ
Решение
header.php
Удалить
<script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1.0.17/jquery.scrollify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1.0.17/jquery.scrollify.min.js"></script>
Откройте footer.php
находить
</body>
Добавьте это прямо выше, вот так
<script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1.0.17/jquery.scrollify.min.js"></script>
</body>
Ваша проблема заключается в том, что, как я и предлагал, jQuery необходимо сначала загрузить на страницу, а затем загрузить в scrollify. Создание прокрутки самой последней вещи для загрузки должно решить проблему. Если нет, то вам нужно сделать это надлежащим образом WP, включив скрипт.