原生js实现淘宝首页点击按钮缓慢回到顶部效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了原生js实现淘宝首页点击按钮缓慢回到顶部效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3223字，纯文字阅读大概需要5分钟。

内容图文

<div class="container"> 
<div class="header">头部</div> 
<div class="content">主要内容，高度是2000px</div> 
<div class="footer>底部</div> 
<div id="btn">返回顶部</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; } //背景图可随意找一张 
font-size: 12px; 
line-height: 55px; 
text-align: center; 
text-indent: -9999em; 
cursor: pointer; 
display: none; 
 
下面是完整的js代码 
 代码如下:

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"; //修改的是内联样式，具有最高的优先级; 
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) { //修改参数可调整返回顶部的速度 
acceleration = acceleration || 0.1; 
time = time || 10; 
var speed = 1 + acceleration; 
function getScrollTop() { //取得滚动条的竖直距离 
return document.documentElement.scrollTop || document.body.scrollTop; 
} 
function setScrollTop(value) { //设置滚动条的竖直距离,实现效果的关键就是在很短的间隔时间内不断地修改滚动条的竖直距离,以实现滚动效果 
document.documentElement.scrollTop = value; 
document.body.scrollTop = value; 
} 
window.onscroll = function() { 
var scrollTop = getScrollTop(); 
if (scrollTop > 100) { //判断滚动条距离窗口顶部多远时显示出来，这里是100px 
btn.style.display = "block"; 
} else { 
btn.style.display = "none"; 
} 
}; 
btn.onclick = function () { 
var timer = setInterval(function() { 
setScrollTop(Math.floor(getScrollTop() / speed)); //这行代码是关键，取得滚动条竖直距离，除以speed后再给滚动条设置竖直距离 
if (getScrollTop() == 0) 
clearInterval(timer); 
}, time); 
}; 
} 
goTop(0.2, 8); 
}, false); 
 
当然，还有其他的实现方法，下面给出其他方法的关键代码 
 代码如下:

btn.onclick = function() { 
clearInterval(timer); 
var timer = setInterval(function() { 
var now = scrollTop; //滚动条竖直距离 
speed = (0 - now) / 10; 
speed = Math.floor(speed); 
if (now == 0); 
clearInterval(timer); 
document.documentElement.scrollTop = now + speed; //标准模式下的浏览器 
document.body.scrollTop = now + speed; //怪异模式下的浏览器 
}, 15); 
} 
 
 
这里的代码主要还是参考了网上其他资源，再加了一点自己的理解。当然还有其他实现方法，比如JavaScript最早时间就支持的window.scrollTo()。用jQ来实现的话代码量将会变得很少，可参看w3cplus 

个人觉得，先学好原生JavaScript，比如搞清楚数据类型，闭包，继承，作用域，DOM，CSS，事件处理，Ajax等，用熟练后学习其他框架将会容易很多。
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的原生js实现淘宝首页点击按钮缓慢回到顶部效果全部内容，希望文章能够帮你解决原生js实现淘宝首页点击按钮缓慢回到顶部效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端