故如虹,知恩;故如月,知明
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术

实现返回顶部效果2

5589人阅读 2019/9/19 17:18 总访问:3842361 评论:0 收藏:0 手机
分类: 前端

实现返回顶部效果1:http://www.tnblog.net/aojiancc2/article/details/164


效果如下:


html:

<div class="rollto" style="display: none;">
    <a class="ico ico-totop" style="color: #38A3DB" title="回顶部"></a>
</div>

css:

.rollto {
    position: fixed;
    right: 5px;
    bottom: 51px;
    z-index: 999999;
    width: 32px;
    font-family: simsun;
    /* display: none; */
}

.ico-totop {
    background-position: 0 0;
}

.ico-torespond, .ico-totop {
    display: block;
    margin-top: 2px;
    height: 32px;
    width: 32px;
    opacity: .8;
    filter: alpha(opacity=80);
    cursor: pointer;
}

.ico {
    overflow: hidden;
    line-height: 64px;
    font-size: 0;
    display: inline-block;
}

.comm, .ico {
    /*图片地址,根据你项目的图片位置为准*/
    background-image: url(img/sprite.png);
    background-repeat: no-repeat;
}

js:

//回到顶部
$(".rollto").click(function () {
    $("html,body").animate({ scrollTop: 0 }, 200);
});

$(document).scroll(function () {
    var scroll_top = $(document).scrollTop();
    //高度多少出现返回顶部,可以随意调整
    if (scroll_top > 600) {
        $(".rollto").show();
    } else {
        $(".rollto").hide();
    }
})

最后贴一个需要用到的图,需要的右键保存即可:

资源下载地址:http://www.tnblog.net/resource/aojiancc2/5F89DD26DB134D86B50DD8CA3C53B990




欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739

评价