您当前位置：首页 > web前端 > htmlcss > javascript实现页面中回到顶部功能

javascript实现页面中回到顶部功能

来源：程序员人生发布时间：2016-11-17 09:51:26 阅读次数：2892次

当1个页面比较长的时候，在下拉页面到1定长度的时候，页面右下角通常会出现1个回到顶部的图标，点击便可以回到页面顶部，本案例对这1功能进行了简单实现。当页面下拉到1定长度后，页面右下角出现1个回到顶部图标，点击以后，页面会滑动到页面顶部，同时回到顶部图标也会消失。合适初学者参考。

<!doctype html>
<html>
 <head>
  <meta charset="UTF⑻">
  <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>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <h1>大鹏1日同风起，扶摇直上9万里。</h1>
    <div class="return-top" id="return_top">▲</div>
    <script>
        /*
            思路：
                第1步：当页面加载完后，获得所要操作的 节点对象
                第2步：为window对象添加1个转动条转动事件onscroll
                第3步：
                        在转动条转动的进程中，不断的获得转动条距离顶部的距离数值
                        当这个数值大于300的时候，显示出回到顶部图标
                        否则，隐藏回到顶部图标
                第4步：
                    为回到顶部图标添加1个点击事件，转动条回到顶部。            
        */
        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>

本案例对回到顶部功能进行了简单实现，读者可以运行代码查看效果。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 Leetcode 64 Minimum Path Sum

下一篇 HDU 4810 Wall Painting（组合数学 + 位运算）——2013ACM/ICPC亚洲区南京站现场赛

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点