Native js taobao home page click the button to slowly return to the top effect

  • 2020-03-30 02:33:52
  • OfStack

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 background of the button will become gray and the icon will become text. Click the button to slowly return to the top

Let's first examine what events need to be added to achieve this effect. The mouseover and mouseout buttons change, so you need to add mouseover and mouseout events to the buttons. To listen for changes to the scroll bar, you need to add the scroll event to the window, click the button to go back to the top, and the button to add the click event. We package the event handler into three functions: moveIn, moveOut, goTop;

Let's start with the HTML/CSS code
 
<div class="container"> 
<div class="header"> The head </div> 
<div class="content"> The main content, the height is 2000px</div> 
<div class="footer> At the bottom of the </div> 
<div id="btn"> Return to the top </div> 
</div> 

 
.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; } //Look for a random background picture
font-size: 12px; 
line-height: 55px; 
text-align: center; 
text-indent: -9999em; 
cursor: pointer; 
display: none; 

Here is the complete js code
 
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 change is inline, 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 of return to the top
acceleration = acceleration || 0.1; 
time = time || 10; 
var speed = 1 + acceleration; 
function getScrollTop() { //Gets the vertical distance of the scroll bar
return document.documentElement.scrollTop || document.body.scrollTop; 
} 
function setScrollTop(value) { //Setting the vertical distance of the scroll bar, the key to achieve the effect is to constantly modify the vertical distance of the scroll bar in a very short interval time, in order to achieve the scrolling effect
document.documentElement.scrollTop = value; 
document.body.scrollTop = value; 
} 
window.onscroll = function() { 
var scrollTop = getScrollTop(); 
if (scrollTop > 100) { //To see 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. You take the vertical distance of the scroll bar, divide it by speed, and then you set the vertical distance of the scroll bar
if (getScrollTop() == 0) 
clearInterval(timer); 
}, time); 
}; 
} 
goTop(0.2, 8); 
}, false); 

Of course, there are other ways to implement it, and the key code for the other ways is given below
 
btn.onclick = function() { 
clearInterval(timer); 
var timer = setInterval(function() { 
var now = scrollTop; //Vertical distance of the scroll bar
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; //Browser in weird mode
}, 15); 
} 

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/20140406172919.gif? 201436172934 ">  
The code here is mainly a reference to other resources on the Internet, and a little more of their own understanding. There are other implementations, of course, such as window.scrollto (), which JavaScript supports at the earliest possible time. With jQ the amount of code will be minimal, see w3cplus

I think it will be easier to learn native JavaScript, such as data types, closures, inheritance, scopes, DOM, CSS, event handling, Ajax, etc.

Related articles: