tnblog
首页
登录

实现返回顶部效果2

130人阅读 2019/9/19 17:18 评论: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




评价
很多事不是看到了希望才去努力,而是努力了才能看到希望
文章
6
粉丝
16
评论
8
分类
16
{{item.ArticleTitle}}
{{item.BlogName}} : {{item.Content}}