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

小刀技术学习 2019-04-12 1242浏览 0

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

今天看到一个不错的返回顶部的图标于是就自己写了一个返回顶部的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>

效果图片