zarkfx scroll 自动滚动到顶部, 还在为页面滚动功能发愁吗?

2013-04-07 00:59:26 +08:00
 sdjl
有一个功能是所有网站都经常需要的,就是滚动到页面顶部,并且还要求只有当页面往下滚动到一定程度时按钮才显示出来。

今天为大家推荐zarkfx的scroll工具,让你通过非常简单的一句话给你的按钮添加滚动效果,并可设定滚动速度、滚动位置(目标)等。

样例可以在这里查看: http://zarkfx.com/auto_gen/scroll.html

如果你需要把此功能加入你的项目,仅需添加jquery以及zarkfx两个js文件即可,然后给你的任何元素添加fx配置即可,比如:

<a fx="scroll[speed=500;]">滚</a>

(兼容ie6、7、8)
2664 次点击
所在节点    分享创造
2 条回复
foru17
2013-04-07 01:06:39 +08:00
/* 返回顶部*/
var STR_TO_TOP = '返回顶部';
$(function() {
var button = $('<a href="#" id="to-top" title="' + STR_TO_TOP + '">↑</a>').appendTo('body');

$(window).scroll(function() {
if ($(window).scrollTop() > $(window).height()) button.fadeIn(500);
else button.fadeOut(500);
});

button.click(function(e) {
e.preventDefault();

$('html, body').animate({
scrollTop: 0
}, 1000, function() {
window.location.hash = '#';
});
});
});

css文件中设置好a href样式就好了
sdjl
2013-04-07 01:13:13 +08:00
对了, 你完全可以自定义按钮的样式, 或者给一张图片配上scroll这个fx就ok了, 别忘记指定speed~~~~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/65122

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX