Can't implement Jquery Scrollify on my website

Question

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

Gremash · Accepted Answer · 2016-03-29T18:09:28.970

0

Where are you including your .js files? You are probably running your javascript in the head section for your page before you are loading jquery and scrollify.

Load all of your .js files in the head before you run any of your javascript on the page or move your javscript into your .js file.

edited Mar 29 '16 at 18:09

answered Mar 29 '16 at 18:02

Gremash

8,158
6
30
44

Ok I figured it out! It wasnt working because my Jquery wasnt linked first.. thank you guys! – Anso Asselin Mar 29 '16 at 23:28

Wolfrum · Answer 2 · 2016-03-29T18:28:57.653

0

You might need to add <script src="script/jquery-2.2.1.min.js"></script> inside your HTML body element.

edited Mar 29 '16 at 18:28

answered Mar 29 '16 at 18:06

Wolfrum

25
7

I linked all my .js files in the head before running the script and also added just under my tag. but I still dont see any scrolling effect? Should I have to add anything in my CSS about the class="section" ? – Anso Asselin Mar 29 '16 at 18:16

score 0 · Answer 3 · edited Mar 31 '18 at 21:19

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>

Paste this right under the <head> tag

edited Mar 31 '18 at 21:19

Machavity

30,841
27
92
100

answered Mar 31 '18 at 21:14

Aonodensetsu

35
1
8

Can't implement Jquery Scrollify on my website

3 Answers3