Use "oil monkey" in chrome to add "Back to Top" function for each webpage

Today, I saw an introduction to "oil monkey" on the Internet, which is quite interesting. I would like to share with you. This was originally a Firefox plug-in. Later I checked that chrome also supported user scripts since 4.0. The so-called "oil monkey" is actually a js script ending with *. user. js. You can execute this script on every webpage through oil monkey. Using this js script, you can make some personalized modifications to the website page. For example, we mentioned today that the "Back to Top" function is added on each page, the result is to automatically add the function of returning to the top of each page ::

　　

Create a script named "oil monkey". The following describes how to compile your own user script in chrome (taking the "Back to Top" function as an example). 1. download it from Google's extension center. Tampermonkey ,This item can be used to manage various user scripts. Of course, it is easier to create a script. 2. after installation, go to the Tampermonkey setting page and create a new script: Enter the following js script on the script editing page (used to implement the "Back to Top" function) // = UserScript =
// @ Name GotoTop
// @ Version 0.1
// @ Description adds the return top button to each webpage
// @ Match http ://*
// @ Match https ://*
// @ Copyright scott qian
// @ Require http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
// =/UserScript =

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

FunctionImportCss (){
VarJqueryScriptBlock = 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 );
}

FunctionScriptWithJquery (){
$ (Document. body ). append ("<div id = 'gototop' title = 'shortcut key: alt + up alt + mouse wheel up'> Back to Top </div> ");
$ ('# Gototop'). click (Function() {$ ('Html, body'). animate ({scrollTop: '0px '}, 800 );ReturnFalse ;});
}

FunctionBindHotKey (){
Document. onkeydown =Function(){
VarA = window. event. keyCode;
If(A = 38) & (event. altKey ))
{
// Alt + up
$ ('Html, body'). animate ({scrollTop: '0px '}, 800 );
}
};

// Bind alt + mouse to scroll up event
Window. addEventListener ('mousewheel ',Function(Event ){
If(Event. wheelDelta> 0 & event. altKey)
{
$ ('Html, body'). animate ({scrollTop: '0px '}, 800 );
// Prevents the scroll bar from scrolling up, resulting in multiple effects
Window. event. preventDefault ();
}
}, False );
} Here is a description. To facilitate js development, I use jquery here, so I need to declare the following paragraph in the header declaration. In this way, we can use jquery in it. // @ Require http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js 3. Save the user script and open a web page, the effect is as follows:

     

  Debug the user script. If you need to Debug the script we wrote, you can enable the Debug Scripts function on the Tempermonkey setting interface. Start developer tools by pressing F12 when the page is opened, and the debugging mode is automatically entered. As shown in: