Taobao home page back to the top button is like this: pull down to a certain distance after the button is displayed, the mouse on the button, the button background will become gray, and the icon into text. Click on the button to slowly return to the top
Let's first analyze which events to add to the implementation of this effect. The mouse moves in the Move Out button, the button performance changes, therefore needs to add mouseover to the button, Mouseout event. To listen for changes to the scroll bar, you need to add a scroll event to the window, click the button to return to the top, and the button to add the Click event. We encapsulate event handlers into three functions Movein, moveout, gotop;
The following is the first HTML/CSS code
Copy Code code as follows:
<div class= "Container" >
<div class= "Header" > Head </div>
<div class= "Content" > main contents, height is 2000px</div>
<div class= "Footer> Bottom </div>
<div id= "BTN" > Back to Top </div>
</div>
Copy Code code as follows:
. container {width:980px; margin:0 auto; height:auto; background: #aaa;}
. content {height:2000px; border:1px solid blue;
#btn {
position:fixed;
bottom:50px;
right:0;
width:54px;
height:55px;
Background:url (icons.png) no-repeat 0-110px; //Background image can be found at random
font-size:12px;
line-height:55px;
Text-align:center;
Text-indent: -9999em;
Cursor:pointer;
Display:none;
The following is the complete JS code
Copy Code code as follows:
Window.addeventlistener ("Load", function () {
var btn = document.getElementById ("btn");
Btn.addeventlistener ("MouseOver", Movein, false);
Btn.addeventlistener ("Mouseout", Moveout, false);
function Movein () {
Btn.style.color = "#ffffff"; The modified inline style has the highest priority;
Btn.style.textIndent = "0em";
Btn.style.backgroundImage = "None";
Btn.style.backgroundColor = "#FF4401";
}
function Moveout () {
Btn.style.textIndent = " -9999em";
btn.style.backgroundImage = "url (icons.png)";
}
function gotop (acceleration, time) {//Modify parameters to adjust the speed of return to the top
Acceleration = Acceleration | | 0.1;
Time = Time | | 10;
var speed = 1 + acceleration;
function Getscrolltop () {//Get the vertical distance of the scroll bar
return Document.documentElement.scrollTop | | Document.body.scrollTop;
}
function Setscrolltop (value) {//Set the vertical distance of the scroll bar, the key to achieve the effect is to continuously modify the vertical distance of the scroll bar in a very short interval to achieve the scrolling effect
Document.documentElement.scrollTop = value;
Document.body.scrollTop = value;
}
Window.onscroll = function () {
var scrolltop = Getscrolltop ();
if (scrolltop > 100) {//Judging how far the scroll bar is from the top of the window, this is 100px
Btn.style.display = "block";
} else {
Btn.style.display = "None";
}
};
Btn.onclick = function () {
var timer = setinterval (function () {
Setscrolltop (Math.floor (Getscrolltop ()/speed)); This line of code is the key, get the scroll bar to the vertical distance, divide the speed and then set the scroll bar to the vertical distance
if (getscrolltop () = = 0)
Clearinterval (timer);
}, time);
};
}
Gotop (0.2, 8);
}, False);
Of course, there are other implementations, and here are the key codes for other methods
Copy Code code as follows:
Btn.onclick = function () {
Clearinterval (timer);
var timer = setinterval (function () {
var now = scrolltop; scroll bar Vertical Distance
Speed = (0-now)/10;
Speed = Math.floor (speed);
if (now = = 0);
Clearinterval (timer);
Document.documentElement.scrollTop = now + speed; Browsers in standard mode
Document.body.scrollTop = now + speed; The browser in weird mode
}, 15);
}
The code here is mainly referring to other resources on the Internet, and then add a bit of their own understanding. There are, of course, other implementations, such as the Window.scrollto () that JavaScript has supported in the earliest time. With JQ, the amount of code will become very small, as can be see W3cplus
Personally, it is easier to learn native JavaScript first, such as figuring out data types, closures, inheritance, scopes, dom,css, event handling, Ajax, etc., and learning other frameworks with proficiency.
