-1

I am trying to set up JQuery Scrollify on my website to get a smooth scroll from one section to the others but cannot make it work! I tried different ways and think I might just be missing something? I think I might not be implementing the script correctly or not giving the sections good class name..Or maybe because I am using Bootstrap??

Need help here!! Thank you so much!

Here is my 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 ------>

and my javascript extrernal 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() {}
    });
4

3 回答 3

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

于 2018-03-31T21:14:58.353 回答
0

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

于 2016-03-29T18:06:50.597 回答
0

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

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

于 2016-03-29T18:02:25.273 回答