现在的位置: 首页 > 程序人生 > 正文
小火箭回到顶部
2013年06月19日 程序人生, 网页前端 ⁄ 共 881字 评论数 5 ⁄ 被围观 7,681 views+

在木蚂蚁(http://www.mumayi.com/)页面的右下角有个小火箭,点击之后,可以回到页面的顶部,而且还有火箭的动态的效果。

于是将木蚂蚁的页面另存为下来,研究是怎么用js和css实现的。自己将页面中的其他元素删除掉,只留下最简洁的demo页面。

Demo的目结构是:

index.html的代码是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <link rel="stylesheet" type="text/css" href="./css/mybody.css" media="all" />  
        <script language="javascript" type="text/javascript" src="./js/jquery-1.4.4.min.js"></script>  
    </head>  
    <body>  
        <div id="scrollTop">  
            <div class="level-2"></div>  
            <div class="level-3"></div>  
        </div>  
    <script src="./js/script.js"></script>  
    <script type="text/javascript">  
        UI.global_search();  
        var uvOptions = {};  
        // !important  
        (function() {  
            initScrollTop();  
        })();  
    </script>  
    </body>  
</html>

实现这个小火箭的功能需要用到一个css样式,和两个js文件还有一张图片。

这个demo支持IE8、chrome、firefox三大主流浏览器。

  

原创文章,转载请注明: 转载自成长的企鹅

本文链接地址: 小火箭回到顶部

关于我:成长的企鹅简介

目前有 5 条留言 其中:访客:3 条, 博主:2 条

  1. wxd : 2014年04月23日09:36:29  -49楼 @回复 回复

    用了 效果特好,感谢楼主

  2. 韦庆东原创 : 2016年04月21日14:27:12  -48楼 @回复 回复

    道理要怎么使用的呢?没有说明 不会用啊


    • 管理员
      成长的企鹅 : 2016年04月25日14:53:39  地下1层 @回复 回复

      用法,就是我贴的index.html的代码啊,没看懂?

      • 韦庆东原创 : 2016年05月03日14:52:04  地下2层 @回复 回复

        贴这些代码进去 没反应啊 那些代码啊图片啊文件夹都上传了 没反应

给我留言

留言无头像?


×