无法在我的网站上实现 Jquery Scrollify [重复]答案

【问题标题】：Can't implement Jquery Scrollify on my website [duplicate]无法在我的网站上实现 Jquery Scrollify [重复]
【发布时间】：2016-07-17 10:33:39
【问题描述】：

我正在尝试在我的网站上设置 JQuery Scrollify，以便从一个部分平滑滚动到其他部分，但无法使其正常工作！我尝试了不同的方法，并认为我可能只是错过了一些东西？我想我可能没有正确实现脚本或者没有给这些部分提供好的类名..或者可能是因为我使用的是 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 外部工作表：

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() {}
    });

【问题讨论】：

标签： javascript jquery twitter-bootstrap jquery-scrollify

【解决方案1】：

<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> 标签下

【讨论】：

【解决方案2】：

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

【讨论】：

我在运行脚本之前将我所有的 .js 文件链接到了头部，并在我的下面添加了标签。但我仍然没有看到任何滚动效果？我是否必须在我的 CSS 中添加任何关于 class="section" 的内容？

【解决方案3】：

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

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

【讨论】：

好吧，我想通了！它没有工作，因为我的 Jquery 没有先链接.. 谢谢你们！