javascript - 在链接上使用 Scrollify

Question

单击链接后，如何使用 scrollify 库将网页向下转换到页面的特定部分。

<ul class="nav navbar-nav">
    <li><a href="#1" class="link">this is a link</a></li>
    <li><a href="#2" class="link">this is another link</a></li>
    <li><a href="#3" class="link">and another link</a></li>
</ul>

单击时，其中的每一个都会将用户发送到如下所示的网页的某个部分。现在没有滚动，每个部分都没有软过渡。

<h3 class="season" id="1"><span class="seasontext">SS17</span></h3>
<h3 class="season" id="2"><span class="seasontext">SS17</span></h3>
<h3 class="season" id="3"><span class="seasontext">SS17</span></h3>

这是滚动模板，但我不太确定如何单独访问链接以及如何使用过渡。

$.scrollify({
    section : "link",
    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() {}
});

$.scrollify.move("#season");

Answer 1

您应该编写一个点击事件来实现这一点，如下所示。

$('.link').click(function(){
  var moveTo = $(this).attr('href');
  $.scrollify("move",moveTo);
});

希望能帮助到你。