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

最新推荐文章于 2023-04-12 17:20:56 发布

小圣贤君

最新推荐文章于 2023-04-12 17:20:56 发布

阅读量4.9k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/zhongguohaoshaonian/article/details/52594375

版权

JavaScript 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

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

<!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>

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

小圣贤君

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
javascript实现页面中回到顶部功能

当一个页面比较长的时候，在下拉页面到一定长度的时候，页面右下角通常会出现一个回到顶部的图标，点击即可以回到页面顶部，本案例对这一功能进行了简单实现。当页面下拉到一定长度后，页面右下角出现一个回到顶部图标，点击之后，页面会滑动到页面顶部，同时回到顶部图标也会消失。适合初学者参考。<!doctype html><html> <head> <meta charset="UTF-8"> <tit
复制链接

扫一扫