鼠标事件 ——返回顶部

目录

关于鼠标事件

返回顶部效果

---

关于鼠标事件

鼠标事件类型：
    onclick 单击
    ondbclick 双击
    oncontextmenu 右侧菜单
    onmouseover 移入
    onmouseout 移出
    onmouseenter 移入
    onmouseleave 移出
    onmousedown 按下
    onmouseup  抬起
    onmousemove  移动

返回顶部效果

1.创建一个块hj 给hj设置样式

2.获取hj

var hj = document.querySelector(".hj");

3.给window添加onscroll事件（在滚动 <div> 元素时执行 JavaScript）

 window.onscroll=function(e){
        if (document.documentElement.scrollTop>50){
            hj.style.display="block";
        }else{
            hj.style.display="none";
        }
        hj.onclick=function(){
            move();
        }
    }

4.定义移动事件（返回顶部）

1.获取滚动条位置   (document.documentElement.scrollTop)  给滚动条移动速度

2.开启timer 当count=20,即执行到最后一步时 停止timer ;滚动条位置清零

 var timer=null;
    function move(){
        clearInterval(timer);
        var s= document.documentElement.scrollTop;
        var t=20;
        var v = s/t;
        var count=0;
       
        timer =setInterval(function(){
            count++;
             s-=v;
             if (t===count){
                 clearInterval(timer);
                 s=0;
             }
             document.documentElement.scrollTop=s;
        },30)
    }