Native js realizes the effect of slowly returning to the top when clicking the button on Taobao homepage_javascript skills

The back-to-top button on Taobao's homepage looks like this: the button is not displayed until it is pulled down to a certain distance. When the mouse is placed on the button, the button background turns gray and the icon changes to text. Click the button to slowly return to the top

Let’s first analyze what events need to be added to achieve such an effect. When the mouse moves in and out of the button, the button's behavior changes, so you need to add mouseover and mouseout events to the button. To listen for changes in the scroll bar, you need to add a scroll event to the window, click the button to return to the top, and add a click event to the button. We encapsulate the event handler into three functions moveIn, moveOut, goTop;

The html/css code is given below

Copy code The code is as follows:

head

Main content, height is 2000px

Copy code The code 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;

The following is the complete js code

Copy Code The code is 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 returning 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 within a short interval to achieve the scrolling effect
document. documentElement.scrollTop = value;
document.body.scrollTop = value;
}
window.onscroll = function() {
var scrollTop = getScrollTop();
if (scrollTop > 100) { //Display when judging how far the scroll bar is from the top of the window, here 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 the speed, and then 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 , the key codes of other methods are given below

Copy code The code is 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; //Standard mode Browser under
document.body.scrollTop = now speed; //Browser under weird mode
}, 15);
}

The code here mainly refers to other resources on the Internet, and adds a little bit of my own understanding. Of course, there are other implementation methods, such as window.scrollTo(), which JavaScript has supported for the earliest time. If you use jQ to implement it, the amount of code will become very small. You can refer to w3cplus

Personally, I think you should learn native JavaScript well first, such as figuring out data types, closures, inheritance, scope, DOM, CSS, and events. Processing, Ajax, etc. It will be much easier to learn other frameworks after you are familiar with them.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn