HTML+CSS+JS实现返回顶部（BackToTop ）按钮

最新推荐文章于 2024-09-08 16:45:30 发布

爱洋芋的土豆丶

最新推荐文章于 2024-09-08 16:45:30 发布

阅读量628

点赞数

分类专栏：前端文章标签： html5 css javascript jquery

本文链接：https://blog.csdn.net/weixin_45848992/article/details/119701621

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        .container {
            height: 1000px;
            background-color: red;
        }

        .back-top {
            width: 40px;
            height: 40px;
            position: fixed;
            bottom: 20px;
            left: 30px;
            background: url("https://2021.igem.org/wiki/images/a/ac/T--ECUST_China--backTop.png");
            background-size: 100% 100%;
            cursor: pointer;
            z-index: 1000;
            transition: height 0.5s;
        }

        .back-top:hover {
            height: 35px;
        }
    </style>
</head>

<body>
    <div class="container"></div>
    <div class="back-top" </body>
    
    <script>
        $(document).ready((function () {
        $(".back-top").hide();//初始隐藏backToTop图标
        $(function () {
        //监听滚动事件，滚动一段距离显现或者隐藏backToTop图标
          $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
              $(".back-top").fadeIn(500);
            } else {
              $(".back-top").fadeOut(500);
            }
          })
        //给backToTop图标添加点击事件
          $(".back-top").click(function () {
            $('html').animate({
              scrollTop: 0
            },
              300,"linear");
          })
        })
      }))
    </script>
</html>