2021-08-26

JS----返回顶部

html代码：
 <div id="returnTop">返回</div>

css样式
 body{
            height: 2000px;
        }
        #returnTop{
            width: 50px;
            height: 50px;
            background: #f00;
            text-align: center;
            line-height: 50px;
            color: #fff;

            position: fixed;
            right: 10px;
            bottom: 100px;
            display: none;
        }

js部分（使用外链式）
//窗口事件方法一：
window.onload = function () {
    console.log(returnTop);

    //功能一
    /**思路：
        1、事件源：window
        2、事件类型：滚动事件  onscroll  当滚动条滚动时触发
        3、事件处理函数
                1)获取滚动距离顶部的距离
                    html或body 节点 距离顶部的距离      scrollTop
    
                2)判定距离  大于500 显示   小于500 隐藏
                3)设置 returnTop的显示或隐藏
    
     */
   window.onscroll = function () {
        //获取滚动距离顶部的距离
        let sTop = document.documentElement.scrollTop || document.body.scrollTop
        console.log(sTop);

        //判定
        if (sTop > 500) {//显示
            returnTop.style.display = 'block';
        } else {//隐藏
            returnTop.style.display = 'none'
        }
          }



    /*功能二    */
    returnTop.onclick = function () {
        //方法一  把html或body节点种的scrollTop设置为0---会闪现不采用
        //document.documentElement.scrollTop =0
        //document.body.scrollTop =0

	  //企业标准：使用定时器慢慢设置到0-----采用
        //开启计时器
        let timeId = setInterval(function () {
            //1、动态获取滚动条距离顶部的距离
            let sTop = document.documentElement.scrollTop || document.body.scrollTop
            //2、进行值的递减操作
            document.documentElement.scrollTop = sTop - 50;
            document.body.scrollTop = sTop - 50;
            //3、判定是否大小等于0
            if (sTop <= 0) {
                clearInterval(timeId)   
                }  
                }, 100)
    }
    }

注意：
		js采用的时外链式，    <script src="js/03.js"></script>写在了head部分，
		须在js文件里写窗口事件

窗口事件方法一
window.onload = function () {}


窗口事件方法二   
 window.addEventListener('load',function(){
    console.log(returnTop);
 })