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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 4250 天前的主题，其中的信息可能已经有所发展或是发生改变。

有一个功能是所有网站都经常需要的，就是滚动到页面顶部，并且还要求只有当页面往下滚动到一定程度时按钮才显示出来。

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

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

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

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

(兼容ie6、7、8)

滚动

zarkfx

Scroll

2 条回复 • 1970-01-01 08:00:00 +08:00

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~~~~

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

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