在chrome中利用“油猴”為每個網頁增加“返回頂部”功能

        今天在網上看到了“油猴”這么個東西的介紹，感覺蠻有趣，跟大家分享一下。這個東西本來是火狐的插件，后來一查原來chrome從4.0以后也支持用戶腳本了。所謂的“油猴”實際上是一段以*.user.js結尾的js腳本，通過油猴你可以在每個網頁上執行你的這段腳本。利用這個js腳本你可以對網站頁面做一些個性化的修改，比如像我們今天提到在每個頁面上增加“返回頂部”的功能，其效果就是在每個頁面自動添加返回頂部的功能：

 

效果圖：

　　

 

創建“油猴”腳本

        

下面介紹一下如何在chrome中編寫自己的用戶腳本（以增加返回頂部功能為例）

 

1. 去谷歌擴展中心下載 Tampermonkey   ,這個東西可以用來管理各種用戶腳本。當然，新建一個腳本也會變得比較容易。

 

2. 安裝后進入Tampermonkey的設置界面，然后創建一個新的腳本：

 

          

 

        在編輯腳本頁面輸入下面的一段js腳本（用於實現“返回頂部”功能）

 

// ==UserScript== 
// @name GotoTop
// @version 0.1
// @description 給每個網頁增加返回頂部按鈕
// @match http://*
// @match https://*
// @copyright scott qian
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
// ==/UserScript==

ImportCss();
ScriptWithJquery();
BindHotKey();

function ImportCss() {
     var jqueryScriptBlock = document.createElement( 'style');
    jqueryScriptBlock.type = 'text/css';
    jqueryScriptBlock.innerHTML = "#gototop{position:fixed;bottom:20%;right:1px;border:1px solid gray;padding:3px;width:12px;font-size:12px;cursor:pointer;border-radius: 3px;text-shadow: 1px 1px 3px #676767;}";
    document.getElementsByTagName( 'head')[ 0].appendChild(jqueryScriptBlock);
}


function ScriptWithJquery() {
     $(document.body).append( "<div id='gototop' title='快捷鍵： alt + up alt+鼠標滾輪向上'> 返 回 頂 部 </div>");
     $( '#gototop').click( function () { $( 'html,body').animate({ scrollTop : '0px' }, 800); return false; });
}

function BindHotKey(){
    document.onkeydown = function(){
         var a = window.event.keyCode; 
         if((a == 38) &&(event.altKey)) 
        { 
             //alt + up
            $( 'html,body').animate({ scrollTop : '0px' }, 800);
        }
    };

     //綁定alt+鼠標向上滾輪事件
    window.addEventListener( 'mousewheel', function(event){
         if(event.wheelDelta > 0 && event.altKey)
        {
            $( 'html,body').animate({ scrollTop : '0px' }, 800);
             //防止滾動條向上滾動，導致多重效果
            window.event.preventDefault();
        }
    }, false);
}

 

 

這里有一個地方需要說明一下。為了方便js的開發，我這里使用了jquery，所以需要在頭部聲明中聲明以下一段話。這樣我們就可以在其中使用jquery了。

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js

 

 

3. 保存該用戶腳本然后隨便打開一個網頁，效果如下：

     

  

 

 

 

調試用戶腳本

 

        如果需要調試我們寫的腳本，可以在Tempermonkey的設置界面開啟Debug Scripts功能。然后在打開頁面的時候按F12開啟 developer tools，就會自動進入調試模式了。如下圖所示：