β

Scrollgress – 根据页面长度实现的阅读进度条插件

设计达人 272 阅读

Scrollgress 可以算是一个不错的交互jQuery插件,通过进度条的方式告诉访客你当前的阅读进度,特别对于长文章,这个进度条的作用更为理想。

阅读进度条

Scrollgress 的运作是这样的,当用户在阅读文章时并向下滚动页面的同时,在页面上方会出现一个进度条动画,用户阅读完后,就会滚动完成。

还有个好处就是,这个页面长度可以根据ID容器来判断,而不是整个浏览器的高度,这个很赞!

scrollgrenn-1

页头

scrollgress-2

页中

scrollgress-3

页尾

使用方法

STEP 1: 在网页中引入插件和jQuery库


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.shejidaren.com/js/plugins/scrollgress.js"></script>

STEP 2: 添加JS代码,可以把body改为你的阅读内容所在的容器ID

$('body').scrollgress();

还有其它设置选项,可以到下载页查看该Jquery插件的详细说明。

插件名称:Scrollgress (阅读进度条)
在线演示: http://michael-lynch.github.io/scrollgress/
下载地址: https://github.com/michael-lynch/scrollgress

Copyright ©2010-2014 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
交流:UI设计交流群:59300679,与500名设计师交流设计,分享素材。
作者:设计达人
爱设计,爱分享。