利用jquery实现缓慢返回顶部

最新推荐文章于 2023-08-10 21:54:06 发布

岁月如歌_

最新推荐文章于 2023-08-10 21:54:06 发布

阅读量1.7k

点赞数 3

本文链接：https://blog.csdn.net/namechenfl/article/details/81516628

版权

<!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>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        .swkc_scroll{
            position: fixed;
            bottom: 50px;
            right: 30px;
            width: 70px;
            height: 70px;
            background:#ddd;
            text-align: center;
            cursor: pointer;
            display: none;
        }
        #box{
            height: 2180px;
            background: red;
            width: 100px;
        }
        </style>
</head>

<body>
        <div class="swkc_scroll">
                
                <p>TOP</p>
        </div>
        <div id="box">

        </div>
</body>
<script>
    $(function(){
        $(window).scroll(function () {
             		if ($(this).scrollTop() > 300) {
             			$(".swkc_scroll").fadeIn();
            		} else {
             			$(".swkc_scroll").fadeOut();
             		}
             	});
        $(".swkc_scroll").click(function () {
             		if ($(window).scrollTop() > 0) {
             			$("html,body").stop().animate({ scrollTop: 0 }, 600);
             		}
             	});
    })
    
</script>
</html>

岁月如歌_

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
利用jquery实现缓慢返回顶部

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫