实例1 ：返回顶部小操作（JQ + JS 实现）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>返回顶部</title>
    <script src="jqsourse.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 4000px;
        }

        div {
             100px;
            height: 30px;
            position: fixed;
            right: 50px;
            bottom: 50px;
            background-color: red;
            color: white;
            line-height: 30px;
            text-align: center;
            display: none;      /*默认不可见 如果轮下去大于300那么就让他可见*/
        }
    </style>
</head>
<body>
<div>返回顶部</div>
</body>
<script>
    //点击返回顶部时开始返回 时间一秒 匀速
    $('div').click(() => {
        $('html').animate({
            scrollTop: 0
        }, 1000, 'linear', () => {
            console.log("yes");
        })
    });

    //鼠标滚轮时 停止运动
    $('html').on('wheel', () => {
        $('html').stop();
    });

    //判断滚轮是否大于 300 如果就显示 否则不显示
    setInterval(()=>{
        let leng = $('html').scrollTop();
        if(leng > 300){
            $('div').css('display','block');
        }else{
            $('div').css('display','none');
        }
    },10);
</script>
</html>

本文来自博客园，作者：咸瑜，转载请注明原文链接：https://www.cnblogs.com/bi-hu/p/14820961.html

实例1 ： 返回顶部小操作（JQ + JS 实现）

实例1 ：返回顶部小操作（JQ + JS 实现）