原生js淘宝首页点击按钮慢慢回到顶部的效果
在淘宝的主页页面上的按钮是这样的：下降到一定距离后，按钮显示。当鼠标放在按钮上时，按钮的背景会变为灰色，图标会变成文本。我们首先分析哪些事件添加到这一效果。进进出出的鼠标按钮，按钮的变化，所以我们需要添加鼠标悬停在按钮的mouseout事件。听在滚动条的变化，你需要添加滚动事件的窗口，点击按钮回到顶，和按钮添加单击事件的事件处理程序。我们将分成三个功能，移动，时差，该；
下面给出HTML / CSS代码
复制代码代码如下所示：
头
主要内容，高度2000px
底部
回到顶端
复制代码代码如下所示：
容器。{宽度：980px；保证金：0汽车；高度：汽车；背景：# AAA；}
。内容{身高：2000px；边框1px solid蓝；}
{ #按钮
位置：固定；
底部：50px；
权利：0；
宽度：54px；
身高：55px；
背景：URL（图标png）没有重复110px 0；} / /可自由选择的背景
字体大小：12px；
行高：55px；
文本对齐：中心；
文本缩进：- 9999em；
光标：指针；
显示：无；
下面是完整的js代码
复制代码代码如下所示：
Window.addEventListener（负荷
VaR建立document.getelementbyid（-）；
Btn.addEventListener（鼠标悬停
Btn.addEventListener（mouseout
函数在（）{
btn.style.color =# ffffff ； / /修改内联样式，具有最高的优先级；
btn.style.textindent =0em ；
btn.style.backgroundimage =没有；
btn.style.backgroundcolor =# ff4401 ；
}
功能时差（）{
btn.style.textindent = 9999em ；
btn.style.backgroundimage =URL（图标png）；
}
该功能（加速时间）{ / /修改参数可以调整到最高速度
加速度=加速度| | 0.1；
时间=时间| | 10；
var速度= 1 +加速；
功能（getscrolltop）{ / /得到滚动条的垂直距离
返回document.documentelement.scrolltop document.body.scrolltop | |；
}
功能setscrolltop（值）{ / /设置垂直滚动条之间的距离，关键是要达到的效果在很短的时间间隔不断修改垂直滚动条之间的距离，从而实现滚动效果
document.documentelement.scrolltop =价值；
document.body.scrolltop =价值；
}
window.onscroll =函数（）{
VaR scrollTop = getscrolltop（）；
如果（scrollTop > 100）{ / /确定显示滚动条在窗口顶部的距离很远，这里是100px
btn.style.display =块；
{人}
btn.style.display =没有；
}
}；
btn.onclick =函数（）{
VaR定时器= setInterval（）函数（）{
setscrolltop（math.floor（getscrolltop）/（速度））； / /这行代码是获取滚动条垂直距离的关键，除以速度给滚动条设置垂直距离
（如果）（getscrolltop = 0）
ClearInterval（定时器）；
时间}；
}；
}
高通（0.2，8）；
}，假）；
当然，还有其他实现，其他方法的关键代码如下所示
复制代码代码如下所示：
btn.onclick =函数（）{
ClearInterval（定时器）；
VaR定时器= setInterval（）函数（）{
var = scrollTop； / /滚动的垂直距离
速度=（0 -现在） / 10；
速度= math.floor（速度）；
如果（现在= 0）；
ClearInterval（定时器）；
document.documentelement.scrolltop =现在+速度； / /标准模式浏览器
document.body.scrolltop =现在+速度； / /怪异模式浏览器
}，15）；
}
这里的代码主要是互联网上的其他资源的引用，增加了更多的了解。当然，还有其他的方法，如window.scrollto（）Javaｓｃｒｉｐｔ支持在最早的时候。这是实施JQ代码量会变得很小，看w3cplus
我认为首先学习原生Javaｓｃｒｉｐｔ要容易得多，比如明确的数据类型、闭包、继承、范围、DOM、CSS、事件处理、Ajax等等。