爱意满满的作品展示区。
sdjl

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

  •  
  •   sdjl · Apr 7, 2013 · 3251 views
    This topic created in 4798 days ago, the information mentioned may be changed or developed.
    有一个功能是所有网站都经常需要的,就是滚动到页面顶部,并且还要求只有当页面往下滚动到一定程度时按钮才显示出来。

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

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

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

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

    (兼容ie6、7、8)
    2 replies    1970-01-01 08:00:00 +08:00
    foru17
        1
    foru17  
       Apr 7, 2013
    /* 返回顶部*/
    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
       Apr 7, 2013
    对了, 你完全可以自定义按钮的样式, 或者给一张图片配上scroll这个fx就ok了, 别忘记指定speed~~~~
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3068 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 14:03 · PVG 22:03 · LAX 07:03 · JFK 10:03
    ♥ Do have faith in what you're doing.