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>
    
  • 相关阅读:
    使用HttpModule实现权限系统
    Asp.net的HTTP请求处理过程
    Asp.net的HTTP请求处理过程
    IHttpModule
    HttpModule内部事件机制和生命周期
    java 窗口中的动态效果
    first
    判断素数
    螺旋矩阵
    JavaBean笔记
  • 原文地址:https://www.cnblogs.com/isylar/p/4843353.html
Copyright © 2011-2022 走看看