您现在的位置:爱折腾>> web>>正文内容

Scrolld.js平滑处理页面的滚动效果

Scrolld.js是一个jQuery的独特开源插件,Scrolld.js提供了一种完美的高精度的布局方法,且使用实时更新的数据值生成导航。使用 Scrolld.js滚动到项目将永远精准且将提供最好的用户体验。

Scrolld.js是专门为支持响应式布局而设计的,可以将页面长导航变成一个简单的任务栏。Scrolld.js设计初衷是为能方便使用,并能够在几分钟内快速部署。

关于Scrolld.js

Scrolld.js提供一种完美的布局和使用实时更新的数据导航高精度滚动的方法。Scrolld.js的目的是易于使用和完全展开的几分钟内。缩小的版本正在1KB。

使用方法

1、下载Scrolld.js插件的源代码,上传到你的服务器里面,或者使用下面的CDN加速

2、在你的网页中引入Scrolld.js文件,你可以使用开发版本或者是压缩版的Scrolld.js

<script src="http://cdn.uedsc.com/scrolld/0.2.1/scrolld.js"></script>

3、在网页的底部运行插件,触发预编译的事件

<script type="text/javascript">
    $('[data-scrolld]').scrolld();
</script>

4、为每个锚元素添加一个独特的数据属性。数据属性的锚值必须匹配目标区的ID

<div data-scrolld='targetElement'></div>
<div id='targetElement'></div>

5、保持默认值或容易调整设置为自定义属性

自定义参数

Scrolld.js是考虑快速和简单的定制了。你可以很容易地定制整个经验通过初始化参数。

<script type="text/javascript">
    $('[data-scrolld]').scrolld({
        position: 'center',
        speed: 2000,
        offset: 50,
        easing: 'easeOutCubic',
        callback: function(){ console.log('done!') }
    });
</script>

默认参数

position: 'top', // 'top' or 'center'
speed: 1100, // any int
offset: 0, // any int
easing: 'scrolldEasing', // Requires jQuery easing plugin for additional easing methods
callback: null // Function ran at end of animation

相关链接

相关文章