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>
    
  • 相关阅读:
    JAVA闰年测试与解决非法输入
    Junit介绍与实现
    等价类划分方法的应用
    使用Visual Studio 2013进行UI自动化测试
    简谈软件测试
    【Software Project Management】Quizs
    White box testing
    peer review
    闰年问题
    热烈庆贺清明小长假的到来
  • 原文地址:https://www.cnblogs.com/isylar/p/4843353.html
Copyright © 2011-2022 走看看