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>
    
  • 相关阅读:
    SQLAlchemy教程-第二章-SQL常用查询的ORM写法
    弹性数组
    C++模板
    typedef 函数名
    typedef 函数指针
    备忘录:“#ifdef __cplusplus extern "C" { #endif”的定义
    linux mmap 内存映射
    生成模型与判别模型(转)
    DL反向传播理解
    UFLDL(Unsupervised Feature Learning and Deep Learning)
  • 原文地址:https://www.cnblogs.com/isylar/p/4843353.html
Copyright © 2011-2022 走看看