js返回顶部动画

一览星梦辰

于 2023-04-04 20:40:27 发布

阅读量106

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_71242735/article/details/129961621

版权

文章目录

js返回顶部动画

css代码

* {
            margin: 0;
            padding: 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="./images/tianshi.gif" alt="">
        </div>
        <ul>
            <li>文字</li>
            <li>文字</li>
            <li>文字</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>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
        </ul>

    </div>

js代码

var img = document.getElementById('img');
    window.onscroll = function () {
        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 () {
            if (document.documentElement.scrollTop > 0) {
                document.documentElement.scrollTop -= 100
            } else {
                clearInterval(timer)
            }
        }, 50)
    }