Customizing the top button

A brief introduction, divided into three steps:

1. Add HTML code

2. Adjust CSS styles

3. Add jquery Code



The specific code is as follows:

<style type= "Text/css" >
#GoTop {
width:40px;
height:40px;
Background-color: #F59E1D;
position:fixed;
bottom:30px;
right:30px;
font-size:19pt;
Text-align:center;
Color: #FFF;
Text-decoration:none;
}
</style>

<div>
<a id= "Gotop" onclick= "gotopfunction ()" href= "javascript:void (0)" >∧</a>
</div>

<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#GoTop"). MouseEnter (
function () {
$ ("#GoTop"). CSS ("Color", "#FFF");
$ ("#GoTop"). CSS ("Background-color", "#F3D117");
$ ("#GoTop"). CSS ("Text-decoration", "none");
}
);
$ ("#GoTop"). MouseLeave (
function () {
$ ("#GoTop"). CSS ("Color", "#FFF");
$ ("#GoTop"). CSS ("Background-color", "#F59E1D");
$ ("#GoTop"). CSS ("Text-decoration", "none");
}
);
});

var sth;
function Gotopfunction () {
Fourleafcloverzcvar=setinterval (gotopfunctioneachscrollby,10);
}

function Gotopfunctioneachscrollby (eachheight) {

Determine if there are two instances of the following
if (document.documentelement && document.documentElement.scrollTop)
{
if (document.documentelement.scrolltop<=0) {
Clearinterval (STH);
}else{
Window.scrollby (0,-25);
}
}else{
if (document.body.scrolltop<=0) {
Clearinterval (STH);
}else{
Window.scrollby (0,-25);
}
}
}
</script>


Worth noting:

1. <a> javascript:void (0) in the label, usually see is href= "#", and this is not, the meaning of this is probably understood not to set any action, that is, the page does not need to automatically refresh the interface. 2. Mouse over the event: with MouseEnter, mouseover or MouseMove?

Hover refers to an event that is executed when the mouse pointer enters and leaves an element that is equivalent to Mouseenter+mouseleave.
MouseOver triggered when the mouse enters an element or its child elements.

MouseMove as you said, if the mouse is moving, only 1 pixels will trigger.
Because the user in the process of browsing the Web page, the mouse will be constantly moving, so once bound to this event, the Web page will continue to execute MouseMove binding response function, consumption of system resources, where the system resources refers to the client.

(can refer to the difference between mouseover and MouseEnter: http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover)
3. Document.documentElement.scrollTop specific explanations can be seen here: http://blog.csdn.net/huang100qi/article/details/5950894

Customizing the top button