zoukankan      html  css  js  c++  java
  • 返回顶部小火箭

    代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            body {
                 2000px;
            }
           .top{
               position: fixed;
               right:50px;
               bottom:100px;
               display: none;
           }
    
        </style>
        <script src="my.js" type="text/javascript"></script>
        <script>
            window.onload = function() {
                var goTop = $("gotop");
                window.onscroll = function() {
                    scroll().top > 0 ? show(goTop) : hide(goTop);  // 如果大于0 就显示 否则隐藏
                    leader = scroll().top;  // 把 卷去的头部 给  起始位置
                    console.log(scroll().top);
                }
                var leader = 0,target = 0,timer = null;
                // leader 起始位置  target  目标位置
                goTop.onclick = function() {
                    target = 0;  //  点击完毕之后 奔向0 去的  不写也可以
                    timer = setInterval(function() {
                        leader = leader + (target - leader ) / 10;
                        window.scrollTo(0,leader);  // 去往页面中的某个位置
                        if(leader == target)
                        {
                            clearInterval(timer);
                        }
                    },20);
    
                }
    
            }
        </script>
    </head>
    <body>
    <div id="gotop" class="top">
        <img src="images/Top.jpg" alt=""/>
    </div>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    <p>我是内容部分,有很多恩多很多</p>
    </body>
    </html>

    my.js为自己封装的小插件

    /**
     * Created by andy on 2015/11/19.
     */
    function $(id) {return document.getElementById(id);}
    function show(obj) { obj.style.display = "block";}
    function hide(obj) { obj.style.display = "none";}
    function scroll() {
        if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
        {
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        }
        else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
        // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
        {
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }
        return { //  剩下的肯定是怪异模式的
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    }
  • 相关阅读:
    vs2013常用快捷键收集
    关于cocos2d-x 与 cocos2d-html5 资源预加载的思考
    【转】使用cocos2d-console工具转换脚本为字节码
    多层CCLayer的touch冲突解决
    jsb里出现的 Invalid Native Object的一次bug修复的思考
    win7 通过命令行压缩文件
    消格子时一个很深的bug的修复纪录
    mac自带apache服务器开启
    shell命令:给当前目录里一个文件压缩一份不包含.svn文件的zip包
    shell命令:删除当前.sh文件所在目录下的zip包,并且重新打包
  • 原文地址:https://www.cnblogs.com/lhh520/p/8994007.html
Copyright © 2011-2022 走看看