How to slide down/up to a different section on scroll

Question

I am trying to do the same as this site in my codepen.

Here my html structure:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="container">
      <section class="home example-classname">
        <h1>Home section</h1>
      </section>

      <section class="about example-classname">
        <h1>About section</h1>
      </section>

      <section class="services example-classname">
        <h1>Services section</h1>
      </section>

      <section class="products example-classname">
        <h1>Products section</h1>
      </section>
    </div>

and here is my jquery which does not work at the moment.

$(document).ready(function(){
  $.scrollify({
        section : "section",
        sectionName : "section-name",
        interstitialSection : "",
        easing: "easeOutExpo",
        scrollSpeed: 1100,
        offset : 0,
        scrollbars: true,
        standardScrollElements: "",
        setHeights: true,
        overflowScroll: true,
        updateHash: true,
        touchScroll:true,
        before:function() {},
        after:function() {},
        afterResize:function() {},
        afterRender:function() {}
    });
  $(function() {
    $.scrollify({
      section : ".example-classname",
    });
  });  
});

How can I automatically make it slide to another section as I scroll down or up?

Hope you can help through my pen here

Answer 1

You just forgot to add the Scrollify file.

Add <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.14/jquery.scrollify.min.js"></script> in your example...

$(document).ready(function() {
  $.scrollify({
    section: "section",
    sectionName: "section-name",
    interstitialSection: "",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset: 0,
    scrollbars: true,
    standardScrollElements: "",
    setHeights: true,
    overflowScroll: true,
    updateHash: true,
    touchScroll: true,
    before: function() {},
    after: function() {},
    afterResize: function() {},
    afterRender: function() {}
  });
  $(function() {
    $.scrollify({
      section: ".example-classname",
    });
  });
});

.home {
  color: white;
  background: black;
  height: 400px;
}

.about {
  background: green;
  height: 400px;
}

.services {
  background: red;
  height: 400px;
}

.products {
  background: purple;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.14/jquery.scrollify.min.js"></script>
<div class="container">
  <section class="home example-classname">
    <h1>Home section</h1>
  </section>

  <section class="about example-classname">
    <h1>About section</h1>
  </section>

  <section class="services example-classname">
    <h1>Services section</h1>
  </section>

  <section class="products example-classname">
    <h1>Products section</h1>
  </section>
</div>

Answer 2

You can use Anchors as shown by this answer. Hope this helps.

Auto-Scroll to next anchor at Mouse-wheel