当前位置：网站首页 > 技术学习 > 正文

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

作者：小刀日期：2019-04-12 00:00 分类：技术学习

小志资源网好看的返回顶部图标-小刀资源网 www.xiaodaozy.com

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

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

效果图片

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

已经过安全软件检测无毒，请您放心下载。

本文地址：https://www.iqzy.cn/news/2184.html

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

2019-04-14小志资源网好看的网站维护更新简易单页404页html代码

搜索

最近发表

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

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

相关文章

取消回复欢迎你发表评论: