侧边栏壁纸

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

2025年02月10日 52阅读 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
打赏

—— 评论区 ——

昵称
邮箱
网址
取消
人生倒计时
舔狗日记

海云博客公告

海云博客、云服务、API、霹雳霹雳、百宝箱、LGZ、影视、卡密网等由于特殊原因将于2025年3月-6月末暂时停更停维护



博客先这样吧,在搞子比很快就好了
欢迎!
一天只弹一次
朕已阅

Warning: Invalid argument supplied for foreach() in /www/wwwroot/mnbt.20739403/usr/plugins/Clogin/Plugin.php on line 158