小火箭回到顶部

最新推荐文章于 2020-08-10 08:20:07 发布

成长的企鹅

最新推荐文章于 2020-08-10 08:20:07 发布

阅读量5.7k

点赞数

分类专栏：技术文章标签：小火箭木蚂蚁回到顶部 demo

本文链接：https://blog.csdn.net/xcxinghai/article/details/9095273

版权

技术专栏收录该内容

42 篇文章 0 订阅

订阅专栏

在木蚂蚁（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三大主流浏览器。

Demo的下载的地址：（ps：下载无需积分）

http://download.csdn.net/detail/xcxinghai/5579727

原创文章，转载请注明： 转载自成长的企鹅

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

关于我：成长的企鹅简介

成长的企鹅

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
小火箭回到顶部

在木蚂蚁（http://www.mumayi.com/）页面的右下角有个小火箭，点击之后，可以回到页面的顶部，而且还有火箭的动态的效果。于是将木蚂蚁的页面另存为下来，研究是怎么用js和css实现的。自己将页面中的其他元素删除掉，只留下最简洁的demo页面。Demo的目录结构是：Index.html的代码是：
复制链接

扫一扫