侧边栏壁纸
    • 累计撰写 142 篇文章
    • 累计收到 195 条评论
    网站添加简单的返回顶部特效
    2022-08-07  20 阅读 1 评论 2 点赞

    网站添加简单的返回顶部特效

    奉天
    2022-08-07 / 1 评论 / 20 阅读 / 检测收录中......
    温馨提示:
    本文最后更新于2022年08月07日,已超过118天没有更新,若内容或图片失效,请留言反馈。

    代码展示

    首先引入JS代码:

    $(function(){
            //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
            $(function () {
                $(window).scroll(function(){
                    if ($(window).scrollTop()>100){
                        $("#backtop").css("bottom","1px");
                    }
                    else
                    {
                        $("#backtop").css("bottom","-100px");
                    }
                });
    
                //当点击跳转链接后,回到页面顶部位置
                $("#backtop").click(function(){
                    //$('body,html').animate({scrollTop:0},1000);
            if ($('html').scrollTop()) {
                    $('html').animate({ scrollTop: 0 }, 1000);
                    return false;
                }
                $('body').animate({ scrollTop: 0 }, 1000);
                     return false;            
               });       
         });    
    });

    CSS部分:

    backtop {
        position: fixed;
        right: 7.5%;
        bottom: -100px;
        z-index: 2;
        overflow: auto;
        width: 54px;
        height: 54px;
        border-top-right-radius: 50px;
        border-top-left-radius: 50px;
        background-image: url(返回顶部图片链接);
        background-position: 0 0;
        cursor: pointer;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out
    }

    把效果图保存,上传到服务器然后修改CSS里的返回顶部图片链接即可!

    html部分:

    <div id="backtop" title="返回顶部" style="bottom: -100px;"></div>
    2

    海报

    正在生成.....

    评论 (1)

    QQ
    昵称
    邮箱
    取消