无法在我的网站上实施 Jquery Scrollify

Question

我正在尝试在我的网站上设置 JQuery Scrollify 以实现从一个部分到其他部分的平滑滚动，但无法正常工作！我尝试了不同的方式，认为我可能只是遗漏了什么？我想我可能没有正确地执行脚本或者没有给这些部分起好 class 的名字..或者可能是因为我正在使用 Bootstrap??

这里需要帮助！！非常感谢！

这是我的 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>...</title>
        <link href="css/magicledger.css" rel="stylesheet" type="text/css">
        <link href="css/normalize.css" rel="stylesheet" type="text/css">
        <link href="css/bootstrap.min.css" rel="stylesheet">

    <script>
    $(function() {
 $(".section").css({"height":$(window).height()});
  $.scrollify({
    section:".section"
  });


  $(".scroll").click(function(e) {
    e.preventDefault();
    $.scrollify("move",$(this).attr("href"));
  });
});
        </script>
</head>

<body>
        <section class="section section1">
        <header class="jumbotron vertical-center">
            <div class="container">
                <h1>...</h1>
                <h3>...</h3>
            <script type="text/javascript">
          window.Maitre = { uuid: "MF301766dea0" };
  </script>
  <script data-maitre src='https://maitreapp.co/widget.js' async></script> 
            </div>    
        </header>
    </section>


 <div class="container-fluid">
     <section class="section section2">
     <div class="row"> <!------- Row 1 ----->
         <div class="col-md-6">
             <div class="inside-row">
            <img src="icons/animat-bezier-color-2.gif" alt="icon1">
             </div>
         </div>
         <div class="col-md-6">
            <div class="inside-row">
                <h3>...</h3>
                <p>...</p>
            </div>
         </div>
     </div>
     </section>
     <section class="section section3">
        <div class="row"> <!-- Row 2 -------->
            <div class="col-md-6">
                <div class="inside-row">
                <img src="icons/animat-layers-color-2.gif" alt="icon2"> 
                </div>
            </div>
            <div class="col-md-6">
                <div class="inside-row">
                    <h3>...</h3>
                    <p>...</p>
                </div>
            </div>
        </div> 
     </section>
     <section class="section section3">
        <div class="row"> <!-- Row 3 ---------->
            <div class="col-md-6">
                <div class="inside-row">
                <img src="icons/animat-network-color-2.gif" alt="icon3">
                </div>
            </div>
            <div class="col-md-6">
                <div class="inside-row">
                    <h3>...</h3>
                    <p>...</p>
                </div>
            </div>
        </div>
     </section>
</div> <!-- ENd of container fluid ------>

和我的 javascript 外部 sheet:

jQuery(document).ready(function($) {

$.scrollify({
        section : ".section-class-name",
        sectionName : "section-name",
        easing: "easeOutExpo",
        scrollSpeed: 1100,
        offset : 0,
        scrollbars: true,
        standardScrollElements: "",
        setHeights: true,
        before:function() {},
        after:function() {},
        afterResize:function() {},
        afterRender:function() {}
    });

Answer 1

你在哪里包含你的 .js 文件？在加载 jquery 和 scrollify 之前，您可能运行在页面的头部部分 javascript 设置了 javascript。

在页面上运行任何 javascript 或将 javscript 移动到 .js 文件之前，先将所有 .js 文件加载到头部。

Answer 2

您可能需要在 HTML body 元素中添加 <script src="script/jquery-2.2.1.min.js"></script>。

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.js">< /script>

将其粘贴到 <head> 标签下

无法在我的网站上实施 Jquery Scrollify

Can't implement Jquery Scrollify on my website

javascript

jquery

twitter-bootstrap

jquery-scrollify