Javascript 如何将Scrollify.js与Wordpress和Elementor一起使用？

我对web开发和编程完全陌生，我想在我的WP网站上使用Scrollify

所以我只想在一个页面中加载Scrollify，所以我将其添加到functions.php

function load_js_assets() {
if( is_page( 26 ) ) {
    wp_enqueue_script('scrollify', 'https://goodlifesoft.com/scrollify.js', array('jquery'), '', false);
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $(function() {
      $.scrollify({
        section : ".elementor-element.elementor-element.elementor-section-height-full.elementor-section-content-middle.elementor-section-boxed.elementor-section-height-default.elementor-section-items-middle.elementor-section.elementor-top-section",
      });
    });
  </script>

}

我在控制台中添加了一条消息，以查看文件是否已加载

我在header.php中加载jquery的最新版本

function load_js_assets() {
if( is_page( 26 ) ) {
    wp_enqueue_script('scrollify', 'https://goodlifesoft.com/scrollify.js', array('jquery'), '', false);
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $(function() {
      $.scrollify({
        section : ".elementor-element.elementor-element.elementor-section-height-full.elementor-section-content-middle.elementor-section-boxed.elementor-section-height-default.elementor-section-items-middle.elementor-section.elementor-top-section",
      });
    });
  </script>

我在footer.php中调用Scrollify函数

function load_js_assets() {
if( is_page( 26 ) ) {
    wp_enqueue_script('scrollify', 'https://goodlifesoft.com/scrollify.js', array('jquery'), '', false);
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $(function() {
      $.scrollify({
        section : ".elementor-element.elementor-element.elementor-section-height-full.elementor-section-content-middle.elementor-section-boxed.elementor-section-height-default.elementor-section-items-middle.elementor-section.elementor-top-section",
      });
    });
  </script>

$（函数（）{
$.scrollify({
节：“.elementor元素.elementor元素.elementor节高度已满.elementor节内容中间.elementor节已装箱.elementor节高度默认值.elementor节项目中间.elementor节.elementor节顶部”，
});
});

这是我在控制台中得到的信息。 控制台中的内容

这在JSFIDLE中对我有效

如果有人能指出我做错了什么，我将非常感激

---

谢谢大家!

如果您也遇到此问题，请在函数前面添加jquery

    <script>
    jQuery(function() {
  jQuery.scrollify({
    section : ".elementor-element.elementor-element.elementor-section-height-full.elementor-section-content-middle.elementor-section-boxed.elementor-section-height-default.elementor-section-items-middle.elementor-section.elementor-top-section",
    sectionName : "data-id"
  });
});
      </script>

jQuery（函数（）{
jQuery.scrollify({
节：“.elementor元素.elementor元素.elementor节高度已满.elementor节内容中间.elementor节已装箱.elementor节高度默认值.elementor节项目中间.elementor节.elementor节顶部”，
sectionName:“数据id”
});
});

---

希望这对某人有所帮助。

在我的网站上尝试实现类似的东西时发现了此线程，并使其正常工作-以下是我所做的：

我下载了Scrollyfy.js脚本并将其上传到我的wordpress子主题文件中

我使用child functions.php调用了脚本

最后，我将此代码添加到页脚

jQuery（函数（）{
jQuery.scrollify({
第节：“.小组”，
sectionName:“数据id”，
间质切片：“，
放松：“easeOutExpo”，
滚动速度：1100，
偏移量：0，
滚动条：对，
标准滚动元素：“”，
赛特：没错，
克罗尔：是的，
是的，
touchScroll：没错，
before:function（）{}，
在：function（）{}之后，
afterResize:function（）{}，
afterRender:函数（）{}
});
});

当然，您必须将“Section”类编辑为您希望在自己的页面/布局中滚动的元素