原生JavaScript实现淘宝式滚动回到顶部功能详解

效果分析与事件监听

淘宝首页的“回到顶部”按钮通常具备以下交互特征：当页面下拉至特定距离后，该按钮才会显现；鼠标悬停时，按钮背景色变为灰色，且图标文字化；点击后，页面会平滑滚动回顶部。

实现此效果需监听三类事件：鼠标移入移出按钮以触发样式变化（对应 mouseover 和 mouseout 事件）、监听窗口滚动条位置变化（对应 window 的 scroll 事件），以及点击按钮触发回到顶部的动作（对应 click 事件）。我们将这三个功能分别封装为 moveIn、moveOut 和 goTop 三个函数。

首先提供基础的 HTML 结构代码。

 
<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;

核心代码实现与平滑滚动原理

以下是完整的 JavaScript 实现代码。

 
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);
} 

上述代码参考了网络资源并融入了个人理解。除了使用 setInterval 手动控制滚动，JavaScript 原生也支持 window.scrollTo() 方法。若使用 jQuery 实现，代码量会显著减少，具体可参考 w3cplus 的相关文章。

个人建议，在接触其他框架前，应先扎实掌握原生 JavaScript，包括数据类型、闭包、继承、作用域、DOM 操作、CSS 样式控制、事件处理及 Ajax 等核心概念，这将有助于后续学习其他框架时更加顺畅。