2017-08-10 49 views
0

如何在单击链接后使用scrollify库将网页转换为页面的特定部分。在链接上使用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模板,但我不太清楚如何单独访问链接以及如何使用转换。

$.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"); 

回答

0

您应该编写一个点击事件来实现下图。

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

希望它有帮助。