美文网首页
JQ点击按钮返回顶部scrollTop

JQ点击按钮返回顶部scrollTop

作者: Wanlly | 来源:发表于2019-11-12 10:53 被阅读0次

此返回顶部用的JQ插件,所以必须先引入jquery.js

代码复制粘贴即可使用

<!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>

    <!-- 引入JQ -->

    <script src="jquery.min.js"></script>

</head>

<style type="text/css">

    body {

        background: skyblue;

    }

    .btn {

        color: #000;

        margin: 1500px auto 500px;

    }

</style>

<body>

    <div class="bg">

        <div class="btn">

            我叫按钮

        </div>

    </div>

    <script>

        $(".btn").click(function () {

            $("html,body").animate({ scrollTop: 0 }, 500);

        }); 

    </script>

</body>

</html>

相关文章

网友评论

      本文标题:JQ点击按钮返回顶部scrollTop

      本文链接:https://www.haomeiwen.com/subject/jryfictx.html