外掛已經上線，下載連結
程式碼已經在github更新了 github.com/abc-club/ct… 請移步github。
另外喜歡的話請star。
求star
求star
求star
本文已同步到 優質的前端資源
背景
很多網站都沒有實現返回頂部的功能，但現實中往往網頁比較長，如果你想返回頂部就非常之麻煩，這時候如果有個按鈕該有多好啊。
這就是這個專案的初衷。
找了一下chrome網上應用商店，其實已經有很多款類似外掛，但往往太過陳舊或者效能較差，不能夠滿足個人需求，估自己搗鼓了一個外掛。同時也算是練一下手。
專案原始碼
實現
目錄結構
是的！就是這麼簡單！總共三個檔案：1個圖示（用於在擴充套件欄顯示的圖示），1個配置檔案（chrome外掛必需的json檔案），1個js指令碼（用於實現功能）
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": [
"<all_urls>"
],
"js":[
"index.js"
]
}
]
}
複製程式碼需要解釋的是<all_urls>，表示匹配所有的url
index.js
// 建立按鈕
const createBtn = () => {
const backToTopBtn = document.createElement('div');
backToTopBtn.setAttribute('id', 'back-to-top');
backToTopBtn.innerHTML = '<svg t="1566628718522" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5590" width="50" height="50"><path d="M508.245 143.837c-0.606 0.059-1.194 0.174-1.791 0.258-0.725 0.104-1.45 0.188-2.168 0.332-0.687 0.135-1.351 0.325-2.024 0.495-0.622 0.156-1.247 0.293-1.861 0.479-0.661 0.202-1.298 0.448-1.945 0.68-0.614 0.219-1.232 0.422-1.836 0.671-0.604 0.25-1.181 0.544-1.771 0.821-0.622 0.293-1.251 0.569-1.861 0.897-0.563 0.301-1.097 0.645-1.644 0.972-0.6 0.358-1.206 0.696-1.791 1.087-0.606 0.405-1.175 0.856-1.756 1.292-0.487 0.364-0.987 0.701-1.459 1.091-1.044 0.856-2.048 1.76-3.001 2.714l-173.668 173.668c-15.986 15.986-15.986 41.907 0 57.894s41.907 15.986 57.894 0l103.784-103.784v556.173c0 22.61 18.328 40.937 40.937 40.937 22.61 0 40.937-18.328 40.937-40.937v-556.176l103.784 103.784c15.986 15.986 41.907 15.986 57.894 0s15.986-41.907 0-57.894l-173.668-173.668c-0.954-0.954-1.957-1.856-3.001-2.712-0.473-0.39-0.972-0.727-1.459-1.091-0.581-0.436-1.152-0.886-1.756-1.292-0.583-0.391-1.189-0.729-1.787-1.087-0.549-0.327-1.083-0.671-1.648-0.974-0.088-0.047-0.17-0.106-0.258-0.153-0.524-0.276-1.068-0.493-1.603-0.743-0.587-0.279-1.167-0.571-1.771-0.821-0.606-0.25-1.224-0.452-1.838-0.673-0.645-0.231-1.283-0.479-1.942-0.68-0.078-0.023-0.151-0.057-0.228-0.080-0.538-0.161-1.089-0.262-1.631-0.399-0.673-0.17-1.339-0.358-2.024-0.495-0.718-0.143-1.445-0.227-2.168-0.332-0.598-0.086-1.185-0.199-1.791-0.258-1.344-0.133-2.692-0.204-4.040-0.205-1.349 0.004-2.698 0.076-4.040 0.209z" p-id="5591" fill="#13227a"></path><path d="M0.571 512.074c0 282.612 229.103 511.714 511.714 511.714s511.714-229.103 511.714-511.714-229.103-511.714-511.714-511.714-511.714 229.103-511.714 511.714zM942.126 512.071c0 237.396-192.446 429.84-429.84 429.84s-429.84-192.446-429.84-429.84 192.446-429.84 429.84-429.84 429.84 192.448 429.84 429.84z" p-id="5592" fill="#13227a"></path></svg>'
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;
}
// 點選事件
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());
};
// 監聽滾動，大於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();
複製程式碼釋出
程式碼寫好了，那麼怎麼看效果呢
其實也很簡單
第一步：下載程式碼或者自己按上面的步驟實現 github.com/abc-club/ct…
第二步：瀏覽器開啟 chrome://extensions/
第三步：把第一步下載的檔案解壓，把整個資料夾拖入第二步開啟的頁面，這時你會看到
第四步：隨便開啟一個網頁：如 github.com/abc-club/fr…
第五步：往下滾動頁面，我們的按鈕便會出現，點選便可以回到頂部