資訊專(zhuān)欄INFORMATION COLUMN
摘要：找了一下網(wǎng)上應(yīng)用商店，其實(shí)已經(jīng)有很多款類(lèi)似插件，但往往太過(guò)陳舊或者性能較差，不能夠滿(mǎn)足個(gè)人需求，估自己搗鼓了一個(gè)插件。
代碼已經(jīng)在github更新了 https://github.com/abc-club/c... 請(qǐng)移步github。
另外喜歡的話(huà)請(qǐng)star。
求star
求star
求star
本文已同步到 https://github.com/abc-club/f...
背景很多網(wǎng)站都沒(méi)有實(shí)現(xiàn)返回頂部的功能，但現(xiàn)實(shí)中往往網(wǎng)頁(yè)比較長(zhǎng)，如果你想返回頂部就非常之麻煩，這時(shí)候如果有個(gè)按鈕該有多好啊。
這就是這個(gè)項(xiàng)目的初衷。
找了一下chrome網(wǎng)上應(yīng)用商店，其實(shí)已經(jīng)有很多款類(lèi)似插件，但往往太過(guò)陳舊或者性能較差，不能夠滿(mǎn)足個(gè)人需求，估自己搗鼓了一個(gè)插件。同時(shí)也算是練一下手。
項(xiàng)目源碼https://github.com/abc-club/c...
實(shí)現(xiàn) 目錄結(jié)構(gòu)是的！就是這么簡(jiǎn)單！總共三個(gè)文件：1個(gè)圖標(biāo)（用于在擴(kuò)展欄顯示的圖標(biāo)），1個(gè)配置文件（chrome插件必需的json文件），1個(gè)js腳本（用于實(shí)現(xiàn)功能）
manifest.json{
"name": "Scroll Top",
"description" : "回到頂部",
"version": "1.0",
"manifest_version": 2,
"icons": {
"16": "btn.png",
"32": "btn.png",
"48": "btn.png",
"128": "btn.png"
},
"content_scripts": [
{
"matches": [
""
],
"js":[
"index.js"
]
}
]
}
需要解釋的是
// 創(chuàng)建按鈕
const createBtn = () => {
const backToTopBtn = document.createElement("div");
backToTopBtn.setAttribute("id", "back-to-top");
backToTopBtn.innerHTML = ""
backToTopBtn.setAttribute("style", "opacity: 0.6; position: fixed; width: 50px; height: auto; z-index: 2147483647; border: 0px; padding: 0px; min-width: auto; min-height: auto; max-width: none; max-height: none; bottom: 100px; right: 80px; margin: 0px; cursor: pointer;display:none;");
backToTopBtn.addEventListener("click", onClick);
return backToTopBtn;
}
// 點(diǎn)擊事件
const onClick = () => {
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,currentScroll - (currentScroll/5));
}
})();
}
// 把按鈕插入文檔
const injectBtn = () => {
var body = document.querySelector("body");
body.appendChild(createBtn());
};
// 監(jiān)聽(tīng)滾動(dòng)，大于50px才顯示按鈕
window.onscroll = function(e){
var currentScroll=document.documentElement.scrollTop||document.body.scrollTop;
var backToTopBtn = document.querySelector("#back-to-top");
if (currentScroll >50) {
backToTopBtn.style.display = "block";
} else {
backToTopBtn.style.display = "none";
}
}
injectBtn();
發(fā)布
代碼寫(xiě)好了，那么怎么看效果呢
其實(shí)也很簡(jiǎn)單
第一步：下載代碼或者自己按上面的步驟實(shí)現(xiàn) https://github.com/abc-club/c...
第二步：瀏覽器打開(kāi) chrome://extensions/
第三步：把第一步下載的文件解壓，把整個(gè)文件夾拖入第二步打開(kāi)的頁(yè)面，這時(shí)你會(huì)看到
第四步：隨便打開(kāi)一個(gè)網(wǎng)頁(yè)：如 https://github.com/abc-club/f...
第五步：往下滾動(dòng)頁(yè)面，我們的按鈕便會(huì)出現(xiàn)，點(diǎn)擊便可以回到頂部
參考資料【干貨】Chrome插件(擴(kuò)展)開(kāi)發(fā)全攻略
如何發(fā)布一款Chrome App
從開(kāi)發(fā) 2 個(gè) Chrome 插件中學(xué)到的（對(duì)新手的 4 個(gè)提示和 6 個(gè)技巧）
chrome開(kāi)發(fā)官方文檔
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106937.html
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：目前花費(fèi)了兩分鐘。我這地方使用卷積神經(jīng)網(wǎng)絡(luò)，。這地方對(duì)卷積神經(jīng)網(wǎng)絡(luò)算法就不做詳細(xì)介紹，感興趣的同學(xué)，可以學(xué)習(xí)一下。 概述 ??很多開(kāi)發(fā)者都討厭網(wǎng)站的驗(yàn)證碼，特別是寫(xiě)網(wǎng)絡(luò)爬蟲(chóng)的程序員，而網(wǎng)站之所以設(shè)置驗(yàn)證碼，是為了防止機(jī)器人訪問(wèn)網(wǎng)站，造成不必要的損失?，F(xiàn)在好了，隨著機(jī)器學(xué)習(xí)技術(shù)的發(fā)展，機(jī)器識(shí)別驗(yàn)證碼的問(wèn)題比較好解決了。 樣本采集工具 ??這里我們采用wordpress的Really Si...
閱讀 1035·2021-11-23 10:11
閱讀 3875·2021-11-16 11:50
閱讀 941·2021-10-14 09:43
閱讀 2725·2021-10-14 09:42
閱讀 2724·2021-09-22 16:02
閱讀 1072·2019-08-29 10:57
閱讀 3389·2019-08-29 10:57
閱讀 2285·2019-08-26 13:52
