zoukankan      html  css  js  c++  java
  • JS 回到顶部

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #goTop{
                display:none;
                position:fixed;
                bottom:20px;
                background:url(http://cdn.w3cfuns.com/resource/images/scrolltop.png) no-repeat 0 0;
                34px;
                height:34px;
                cursor:pointer;
                right:20px;
            }
        </style>
        <script>
            window.onload=function(){
                var timer=null;
                var goTop=document.getElementById("goTop");
                goTop.onclick=function(){
                    timer=setInterval(function(){
                        var top=document.body.scrollTop+document.documentElement.scrollTop;
                        var speed=top/5;
                        if(document.body.scrollTop){
                            document.body.scrollTop-=speed;
                        }
                        else{
                            document.documentElement.scrollTop-=speed;
                        }
                        if(top==0){
                            clearInterval(timer);
                        }
                    },30);
                };
                window.onscroll=function(){
                    if(document.body.scrollTop+document.documentElement.scrollTop>=500){
                        goTop.style.display="block";
                    }
                    else{
                        goTop.style.display="none";
                    }
                };
            };
        </script>
    </head>
    <body>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <p>123</p><br/>
        <span id="goTop"></span>
    </body>
    </html>
    
  • 相关阅读:
    PHP 周转换为日期(最后一天) date("o-W")转Y-m-d日期——贴上代码
    开机后apache假死问题解决
    JS控制滚动条 —— 进度条的简单制作
    2014年初组装的第一台电脑
    开启mysql远程连接
    PHP数组的指针操作方法
    Ubuntu Server 13.04安装图形界面
    utf-8和GBK中文字符的长度计算
    2014校园招聘——历程2
    基于LLVM开发属于自己Xcode的Clang插件
  • 原文地址:https://www.cnblogs.com/isylar/p/4843353.html
Copyright © 2011-2022 走看看