在Wordpress模板上正确使用Scrollify

Question

我不擅长PHP和JS编程。但我正尝试在我自己的Wordpress主题上安装和使用Scrollify。jQuery也应该正确加载。不幸的是，我不知道如何让scrollify工作，主要是因为缺乏对事物如何相互反应或正确加载的理解。

看起来，我可以在我的functions.php中使用以下代码加载scrollify：

function scrollify() {
    wp_register_script( 'jquery-scrollify', get_template_directory_uri() . '/js/scrollify/jquery.scrollify.js', array('jquery'));
    wp_enqueue_script( 'jquery-scrollify' );

    wp_register_script( 'jquery-scrollifymin', get_template_directory_uri() . '/js/scrollify/jquery.scrollify.min.js', array('jquery'));
    wp_enqueue_script( 'jquery-scrollifymin' );

    wp_register_script( 'Gruntfile', get_template_directory_uri() . '/js/scrollify/Gruntfile.js', array('jquery'));
    wp_enqueue_script( 'Grundtfile' ); } 

add_action( 'wp_enqueue_scripts', 'scrollify' );

我的HTML结构是这样的：

<section id="portfolio" class="fullscreen" data-section-name="portfolio"></section>
<section id="about" class="fullscreen" data-section-name="about"></section>

Jquery.scrollify.js中的配置：

    //section should be an identifier that is the same for each section
    section: "fullscreen",
    sectionName: "section-name",
    interstitialSection: "",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset: 0,
    scrollbars: true,
    target:"html,body",
    standardScrollElements: false,
    setHeights: true,
    overflowScroll:true,
    updateHash: true,
    touchScroll:true,
    before:function() {},
    after:function() {},
    afterResize:function() {},
    afterRender:function() {}
};

以及标题中的脚本：

$(function() {
  $.scrollify({
    section : ".fullscreen",
    sectionName : "section-name"
  });
});

如果你想看一下这个页面，链接是：http://kraftsy2017.ch.176-10-116-204.artemis.hostingmanager.ch

我真的很感谢你的帮助，我觉得没有希望了。谢谢。

Answer 1

看起来$没有在您的页面上引用jQuery。试试这个：jQuery(function() { jQuery.scrollify({ section : ".fullscreen", sectionName : "section-name" }); });