js实现返回顶部功能

最新推荐文章于 2024-07-28 20:27:10 发布

等归,

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量110

点赞数 1

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_50370865/article/details/127975269

版权

返回顶部的实现

js实现返回顶部功能

1、css

  <style>
    body {
      height: 2000px;
      background-color: aqua;
    }

    #imgObj {
      position: fixed;
      bottom: 50px;
      right: 50px;
      display: none;
    }
  </style>

2、html样式

<body>
  <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>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
  </ul>
  <img src="./images/tianshi.gif" alt="" id="imgObj">
</body>

3、js部分

<script>
  var img = document.getElementById('imgObj')
  window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop
    var clientHeight = document.documentElement.clientHeight
    // console.log(clientHeight);
    // console.log(scrollTop);
    // 判断图片的显示和隐藏
    if (scrollTop >= clientHeight) {
      img.style.display = 'block';
    } else {
      img.style.display = 'none';
    }

    // 给绑定单击事件 
    img.onclick = function () {
      var timer = setInterval(function () {
        document.documentElement.scrollTop -= 5;
        console.log(scrollTop);
        if (scrollTop = 0) {
          clearInterval(timer)
        }
      }, 10)
    }
  }
</script>