jQuery 返回顶部

最新推荐文章于 2021-10-31 23:25:52 发布

大东哦哦

最新推荐文章于 2021-10-31 23:25:52 发布

阅读量72

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_36454089/article/details/95062353

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./font/iconfont.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 80%;
      height: 9999px;
      /* css 背景条纹 */
      background: linear-gradient(greenyellow 50%, #58a 50%);
      background-size: 100% 30px;
      margin: 0 auto;
    }

    p {
      width: 40px;
      height: 40px;
      position: fixed;
      right: 5px;
      bottom: 20px;
      background: pink;
      border-radius: 10px;
      text-align: center;
      line-height: 40px;
    }
  </style>

</head>

<body>
  <div class="box"></div>
  <p class="iconfont icon-icon-arrow-top4" id='toTop'></p>
</body>
<script src="./jquery-3.1.1.min.js"></script>
<script type="text/javascript">
  $(function () {
    //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
    $(function () {
      $(window).scroll(function () {
        if ($(window).scrollTop() > 100) {
          $("#toTop").fadeIn(1500);
        }
        else {
          $("#toTop").fadeOut(1500);
        }
      });
      //当点击跳转链接后，回到页面顶部位置
      $("#toTop").click(function () {
        $('body,html').animate({ scrollTop: 0 }, 1000);
        return false;
      });
    });
  });
</script>

</html>