javascript - 如何向下/向上滑动到滚动条的不同部分

Question

我正在尝试做同样的事情 site在我的 codepen .

这是我的 html 结构:

    <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>

这是我的 jquery，目前无法正常工作。

$(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",
    });
  });  
});

如何在我向下或向上滚动时自动让它滑到另一个部分？

希望您能通过my pen here提供帮助

Answer 1

你只是忘了添加 Scrollify 文件。

添加<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.14/jquery.scrollify.min.js"></script>在你的例子中......

$(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>