QQ国际网络

QQ国际网络 - 专注分享优质免费QQ活动,QQ技巧,qq我爱网,qq业务网,爱Q生活网

当前位置：首页 » 技术学习 » 正文

小志资源网好看的返回顶部图标

1237 人参与 2019年04月12日 00:00 分类 : 技术学习评论

小编没事也喜欢看看别人博客或者资源网会把一些自己认为不错的资源保存下载分享给大家

今天看到一个不错的返回顶部的图标于是就自己写了一个返回顶部的JS

<!DOCTYPE html>
<html>
<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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .toTop{
            display: none;
            position: fixed;
            right: 50%;
            bottom: -5px;
            transform: translateX(700px);
            width: 54px;
            height: 54px;
            border-radius: 54px 54px 0 0;
            overflow: hidden;
            cursor: pointer;
        }
    </style>
    <script src="./jquery-1.12.2.min.js"></script>
    <script>
        $(function(){
            //返回顶部
            $(window).scroll(function () {
                if ($(window).scrollTop() > 100) {
                    $("#toTop").fadeIn(300);
                } else {
                    $("#toTop").fadeOut(300);
                }
            });
            //当点击跳转链接后，回到页面顶部位置
            $("#toTop").click(function () {
                $('body,html').animate({ scrollTop: 0 }, 500);
                return false;
            });
        })
    </script>
</head>
<body style="height: 3000px;">
    <div id="toTop">
        <img src="./btt.png" alt="">
    </div>
</body>
</html>

效果图片