回到顶部的功能

回到顶部：

<style>
    .return-top{
        width:100px;
        height:100px;
        font:bold 50px/100px "宋体";
        color:#fff;
        background-color:#9e9e9e;
        position:fixed;
        bottom:20px;
        right:20px;
        text-align:center;
        cursor:pointer;
        display:none;
    }
    .return-top.active{
        display:block;
    }
  </style>
  
  <div class="return-top" id="return_top"><img  style=" 100%; height: 100px;" src="images/hdb.png" /></div>
    <script>
        /*
            思路：
                第一步：当页面加载完后，获取所要操作的 节点对象
                第二步：为window对象添加一个滚动条滚动事件onscroll
                第三步：
                        在滚动条滚动的过程中，不断的获取滚动条距离顶部的距离数值
                        当这个数值大于300的时候，显示出回到顶部图标
                        否则，隐藏回到顶部图标
                第四步：
                    为回到顶部图标添加一个点击事件，滚动条回到顶部。            
        */
        var return_top = document.getElementById("return_top");
        var sTop;
        window.onscroll = function(){
            //sTop :滚动条距离顶部的距离数值
            sTop = document.body.scrollTop||document.documentElement.scrollTop;
            if(sTop>300){
                return_top.className = "return-top active";
            }else{
                return_top.className = "return-top";
            }
        }

        return_top.onclick = function(){
            var termId = setInterval(function(){
                sTop-=50;
                if(sTop<=0){

                    clearInterval(termId);
                }
                window.scrollTo(0,sTop);

            },1);       
        }
    </script>

原来是：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .return-top{
        width:100px;
        height:100px;
        font:bold 50px/100px "宋体";
        color:#fff;
        background-color:purple;
        position:fixed;
        bottom:20px;
        right:20px;
        text-align:center;
        cursor:pointer;
        display:none;
    }
    .return-top.active{
        display:block;
    }
  </style>
 </head>
 <body>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <h1>大鹏一日同风起，扶摇直上九万里。</h1>
    <div class="return-top" id="return_top">▲</div>
    <script>
        /*
            思路：
                第一步：当页面加载完后，获取所要操作的 节点对象
                第二步：为window对象添加一个滚动条滚动事件onscroll
                第三步：
                        在滚动条滚动的过程中，不断的获取滚动条距离顶部的距离数值
                        当这个数值大于300的时候，显示出回到顶部图标
                        否则，隐藏回到顶部图标
                第四步：
                    为回到顶部图标添加一个点击事件，滚动条回到顶部。            
        */
        var return_top = document.getElementById("return_top");
        var sTop;
        window.onscroll = function(){
            //sTop :滚动条距离顶部的距离数值
            sTop = document.body.scrollTop||document.documentElement.scrollTop;
            if(sTop>300){
                return_top.className = "return-top active";
            }else{
                return_top.className = "return-top";
            }
        }

        return_top.onclick = function(){
            var termId = setInterval(function(){
                sTop-=50;
                if(sTop<=0){

                    clearInterval(termId);
                }
                window.scrollTo(0,sTop);

            },1);       
        }
    </script>
 </body>
</html>

相关阅读:
WebBrowser获取完整COOKIE
验证码
 fee photo
net reactor加密源码保软件安全-net reactor使用教程
 C#支付宝多次回调问题
 C# 获取程序运行目录
 2DToolkit官方文档中文版打地鼠教程
 Unity开发Oculus游戏
 游戏Demo（持续更新中...）
使用Slua框架开发Unity项目的重要步骤
原文地址：https://www.cnblogs.com/shandayuan/p/8693985.html