如何在滚动时向下/向上滑动到不同的部分

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>

Answer 2

您可以使用此答案所示的锚点。希望这可以帮助。

Auto-Scroll to next anchor at Mouse-wheel