The back to the top button on Taobao homepage is as follows: the button will be displayed after pulling down to a certain distance. When the mouse is placed on the button, the button background will turn gray and the icon will turn into text. Click the button slowly back to the top
Let’s first analyze what events need to be added to achieve such an effect. Move the mouse in and out of the button, and the button performance changes, so you need to add mouseover and mouseout events to the button. To listen for changes in the scrollbar, you need to add a scroll event to the window, click the button to go back to the top, and add a click event to the button. We encapsulate the event handler into three functions moveIn, moveOut, goTop;
Here is the html/css code
The code copy is as follows:
<div>
<div>Head</div>
<div>Main content, height is 2000px</div>
<divbtn">Back to top</div>
</div>
The code copy is 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; } //You can find a background image at will
font-size: 12px;
line-height: 55px;
text-align: center;
text-indent: -9999em;
cursor: pointer;
display: none;
Below is the complete js code
The code copy is as follows:
window.addEventListener("load",function() {
var btn = document.getElementById("btn");
btn.addEventListener("mouseover",movIn, false);
btn.addEventListener("mouseout", moveOut, false);
function moveIn() {
btn.style.color = "#ffffff"; //The inline style is modified, with 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 the parameters to adjust the speed to 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 achieving the effect is to constantly modify the vertical distance of the scroll bar within a very short interval to achieve the scroll effect
document.documentElement.scrollTop = value;
document.body.scrollTop = value;
}
window.onscroll = function() {
var scrollTop = getScrollTop();
if (scrollTop > 100) { // When determining how far the scrollbar is from the top of the window, it 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 vertical distance of the scroll bar, divide it by speed and set the vertical distance to the scroll bar.
if (getScrollTop() == 0)
clearInterval(timer);
}, time);
};
}
goTop(0.2, 8);
}, false);
Of course, there are other implementation methods, and the following are the key codes for other methods
The code copy is as follows:
btn.onclick = function() {
clearInterval(timer);
var timer = setInterval(function() {
var now = scrollTop; //The vertical distance of the scroll bar
speed = (0 - now) / 10;
speed = Math.floor(speed);
if (now == 0);
clearInterval(timer);
document.documentElement.scrollTop = now + speed; //Browser in standard mode
document.body.scrollTop = now + speed; //Browsers in weird mode
}, 15);
}
The code here mainly refers to other resources on the Internet and adds a little bit of your own understanding. Of course there are other implementation methods, such as window.scrollTo() that JavaScript supports at the earliest time. If you implement it with jQ, the code volume will become very small. See w3cplus
Personally, I think it will be much easier to learn native JavaScript first, such as figuring out data types, closures, inheritance, scope, DOM, CSS, event processing, Ajax, etc., and learning other frameworks after proficiency.