js动画之返回顶部

获取浏览器兼容性问题

滚动兼容性：

标准模式下：document.documentElement.scrollTop
非标准模式：document.body.scrollTop

高度的兼容性：

标准模式：
document.body.clientHeight 全部的高度
document.documentElement.clientHeight 可视高度
非标准模式：
document.body.clientHeight 可视高度
document.documentElement.clientHeight 全部的高度

动画——返回顶部

css

 * {
        padding: 0;
        margin: 0;
    }

    #box {
        height: 2000px;
        background-color: aqua;
    }

    #img {
        position: fixed;
        right: 50px;
        bottom: 100px;
        display: none;
    }

HTML

<div id="box">
        <div id="img">
            <img src="./image/1676173176761.jpeg" alt="" style="width: 60px; height: 60px;">
        </div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
          
        </ul>

js

var img = document.getElementById('img')
    window.onscroll = function () {
        console.log('测试');
        var top = document.documentElement.clientHeight
        if (document.documentElement.scrollTop > top) {
            img.style.display = 'block'
        } else {
            img.style.display = 'none'
        }
    }
    // 点击
    img.onclick = function () {
        var timer = setInterval(function () {
            // console.log(1);
            if (document.documentElement.scrollTop > 0) {
                document.documentElement.scrollTop -= 100
            } else {
                clearInterval(timer)
            }

        }, 50)
    }

运行结果