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;
}
