V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
sdjl
V2EX  ›  分享创造

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

  •  
  •   sdjl · 2013-04-07 00:59:26 +08:00 · 2653 次点击
    这是一个创建于 4064 天前的主题,其中的信息可能已经有所发展或是发生改变。
    有一个功能是所有网站都经常需要的,就是滚动到页面顶部,并且还要求只有当页面往下滚动到一定程度时按钮才显示出来。

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

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

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

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

    (兼容ie6、7、8)
    2 条回复    1970-01-01 08:00:00 +08:00
    foru17
        1
    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
        2
    sdjl  
    OP
       2013-04-07 01:13:13 +08:00
    对了, 你完全可以自定义按钮的样式, 或者给一张图片配上scroll这个fx就ok了, 别忘记指定speed~~~~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2764 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:25 · PVG 20:25 · LAX 05:25 · JFK 08:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.