javascript - 如何在Meteor中使用scrollIt？

如何将scrollIt与Meteor一起使用？我知道jQuery包含在Meteor中，但是我是否也需要向scrollIt添加引用，而Meteor无法做到这一点呢？

1）包括jQuery和scrollIt.js

<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="scrollIt.js" type="text/javascript"></script>

2）在每个部分上放置一个data-scroll-index属性

<div data-scroll-index="0">..content..</div>
<div data-scroll-index="1">...</div>
<div data-scroll-index="2">...</div>

3）在每个nav元素上放置相应的data-scroll-nav属性

<a data-scroll-nav="0">About</a>
<a data-scroll-nav="1">Usage</a>
<a data-scroll-nav="2">Options</a>

4）对于节的链接，请放在data-scroll-goto属性上

<a data-scroll-goto="0">Back to top</a>

5）调用scrollIt（）

$(function(){
  $.scrollIt();
});

最佳答案

首先欢迎您使用Stackoverflow。其次，我在这里假设对流星的基本理解。我只给流星项目中的插件提供html模板代码和相关js代码

按照您的用例的步骤进行操作

步骤1：将您的scroll.js lib文件放在项目根目录下的client目录中

因此，它就像<your-project-lib>/client/scrollit.js

您不需要在任何地方包含脚本标签。流星处理它。

步骤2：将html代码放入模板中，如下所示：

scrollTemplate.html

<template name="scrollTemplate.html">

 <div data-scroll-index="0">..content..</div>
 <div data-scroll-index="1">...</div>
 <div data-scroll-index="2">...</div>

 <~!-- Your whatever html code will go inside here -->
 <a data-scroll-nav="0">About</a>
 <a data-scroll-nav="1">Usage</a>
 <a data-scroll-nav="2">Options</a>
</template>

步骤3：在模板的rendered事件中初始化滚动

Template.scrollTemplate.rendered= function(){
   $.scrollIt();
}

模板的呈现事件类似于ready事件，但仅适用于模板内部的html。

我没有测试过，但应该可以