原生js实现返回顶部特效

Posted 2021-01-14 Alice_Daily

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现返回顶部特效相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <link herf="index.css">       
   </head>
  <body>
        <span id="icon"></span>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>
        <script src="scroll.js"></script>
                <script src="index.js"></script>
       </body>
</html>

index.css

            *{
                padding: 0;
                margin: 0;
                border: none;
                list-style: none;
            }
            body{
                background-color: #ddd;
            }
            p{
                text-align: center;
                font-size: 25px;
                margin-bottom: 30px;
            }
            #icon{
                width: 43px;
                height: 43px;
                background: url("./images/to_top.png") no-repeat;
                background-size: 100% 100%;
                position: fixed;
                bottom: 15px;
                right: 20px;
                display: none;

            }

index.js

             window.onload=function(){
                 //定义变量
                 let scroll_top=0;
                 let begin=0,end=0,timer=null;
                 //监听窗口滚动事件
                 window.onscroll=function(){
                     scroll_top=scroll().top;
                     //显示和隐藏
                     scroll_top>0?show($("icon")):hidden($("icon"));
                 }
                 //监听图标的点击事件
                 $("icon").onclick=function(){
                     //清除定时器
                     clearInterval(timer);
                     //开启定时器
                     timer=setInterval(function(){
                        begin+=(end-begin)*0.2;
                        window.scrollTo(0,begin);
                        //判断运动结束条件，清除定时器
                        if(Math.round(begin)===end){
                            clearInterval(timer);
                        }
                        
                     },30);
                 }
             }
             function $(id){
                 return typeof id==="string"?document.getElementById(id):null;
             }
             function show(obj){
                 return obj.style.display="block";
             }
             function hidden(obj){
                 return obj.style.display="none";
             }

scroll.js

function scroll(){
    if(pageYOffset!==null){
        return {
            top:window.pageYOffset,
            left:window.pageXOffset
        }
    }else if(document.compatMode===CSS1Compat){
        return {
            top:document.documentElement.scrollTop,
            left:document.documentElement.scrollLeft
        }
    }
    return {
        top:document.body.scrollTop,
        left:document.body.scrollLeft
    }
}

以上是关于原生js实现返回顶部特效的主要内容，如果未能解决你的问题，请参考以下文章