开发Chrome扩展

manifest.json

{
    "manifest_version": 2,
    "name": "返回顶部",
    "version": "1.0",
    "description": "返回顶部",
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "content_scripts": [
        {
            "matches": ["*://*/*"],
            "css":["css/upToTop.css"],
            "js": ["js/jquery.min.js", "js/upToTop.js"]
        }
    ]
}
var totop = "<div id='uptotop' ><a href='#'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAjklEQVQ4T8WS0Q3CMAwF723AJjBCmQRWYQNGoJO0I3SUbmBkFBCkbhKpqshnpLucI4uNRxt59hOY2QEYUuFZ0hzVhgVf8ClBExBKFoIM7gGXHIFQ8iPIYUnXdDeuST6CCH7PXJK8BCW4JlELXJSY2QO4AL3PXFusbJybF/gvd5LuNTgr8cfG/Taxteb/BU9WGU7IWHkyuQAAAABJRU5ErkJggg=='></a></div>"
$("body").append(totop);

$(window).scroll(function () {
    // 滚动条距离顶部的距离 大于 200px时
    if ($(window).scrollTop() >= 100) {
        $("#uptotop").fadeIn(1000); // 开始淡入
    } else {
        $("#uptotop").fadeOut(1000); // 如果小于等于 200 淡出
    }
});

#uptotop{
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    text-align: center;
    cursor: pointer;
    display: none;
    z-index: 1000000;
}
#uptotop a{
    background: rgba(0,0,0,.5);
    border-radius: 50%;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    line-height: 40px;
    margin-bottom: 1px;
    color: #fff;
    text-decoration: none;
}

#uptotop a:hover{
    background-color: #3385ff;
}

#uptotop a img{
    padding-top: 11px;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容