累计撰写 38 篇文章
累计添加 13 个标签
累计收到 223 条评论

悬吊喵-返回顶部web小组件点击喵可自动滑到当前页面顶部

2025年02月10日 53阅读 0评论 3点赞

首页
/
默认分类
/
正文

手搓出来个返回顶部的小组件，做的可能有点不好，欢迎各位大神可以改一改。
悬吊猫返回顶部小组件，一个比较实用的web小组件。用户滑到一定距离，点击右下角的悬吊猫即可滑动到顶部。
(∩╹∀╹∩)*❤

演示地址

https://lgnb.asia/admin/demo/77-xuandiao

演示图片

悬吊喵返回顶部小组件演示图片

#### html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        .bg_top{
                    width: 90px;
                    height: 500px;
                    position: fixed;
                    right: 30px;
                    bottom: 100%;
                    display: none;
                    
                }
                .bg_top img{
                    width: 90px;
                    height: 1150px;
                    transition: all 1s ease 0s; 
                    cursor: pointer;
                    opacity: 0.6;
                }
    </style>

</head>

<body>
    <script src="http://cdn.staticfile.org/jquery/3.7.1/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $(window).scroll(function () {
                    var scroll_top = $(document).scrollTop();
                    if (scroll_top > 250) {               //当向下滚动250px时,出现返回顶部链接
                        $(".bg_top").show(300);
                    } else {
                        $(".bg_top").hide(300);
                    }
                });
                $(".bg_top").click(function () {
                    $("html,body").animate({scrollTop:0}, 1000);
                });
                $(".bg_top img").hover(function(){
                    $(this).css({
                        "opacity":1,
                        "width":"90",
                        "margin-top":"100",
                    });        
                },function(){
                    $(this).css({
                        "opacity":0.6,
                        "width":"90",
                        "margin-top":"0",
                    });
                });
        });
    </script>
    <div class="bg_top">
        <img src="https://lgnb.asia/admin/demo/77-xuandiao/appIcon.png">
    </div>
    <!--悬挂的喵 结束-->

</body>

</html>

3赞

打赏