效果图
HTML
<span id="top"></span>
<p>今天天气好</p>
……
还有一坨的p,为了可以滚动
CSS
*{
margin: 0;
padding: 0;
border: none;
list-style: none;
}
body{
background-color: #cccccc;
}
p{
margin-bottom: 20px;
text-align: center;
}
#top{
width: 40px;
height: 40px;
background:url("图片/six1.jpg") no-repeat;
position: fixed;
right: 10px;
bottom: 10px;
-webkit-background-size: 100%;
background-size: 100%;
display: none;
}
JS
事件分析
页面滚动(onscroll)
,图标显示
图标点击(onclick)
,回到顶部
特效
由于点击图标后,是一个缓动回顶的过程
所以需要用到缓动动画
缓动动画:定时器、起始位置、终点位置、缓动系数
定时器:先清后设置,最后需要清除
原理
滚动条滚动到的位置为动画的起点,滚动的长度就为begin
终点位置为0
缓动公式:begin=begin+(end-begin)*0.2;
需要的值
1、滚动的长度
2、图标
还需要加上一个处理兼容性问题的函数
window.onload = function () {
//1、监听窗口的滚动
var scrollTop=0;
var span=document.getElementById("top");
var timer=null,begin=0,end=0;
window.onscroll = function () {
//1.获取滚动高度
scrollTop=scroll().top;
//2.盒子的显示
if(scrollTop<=0){
span.style.display="none";
}else
span.style.display="block";
begin=scrollTop;
}//onscroll
//3.监听点击
$("top").onclick = function () {
clearInterval(timer);//先清后设置
//4.开启缓动动画
timer=setInterval(function () {
//起初的begin为滚动长度
begin=begin+(end-begin)*0.2;
//begin一直在变化
window.scrollTo(0,begin);//每20毫秒就滚动到这个位置
//5.清除定时器
if(parseInt(begin)===end) {
clearInterval(timer);
}
},20);//每20毫秒变化一次
}
}//onload
在清除定时器部分,如果不清除,可以达到效果。但是为了性能,需要要遵循设置了就清除的原则。
但是如果只写一句clearInterval(timer);
达不到预期效果。
因为每点击一次就清除一次,导致每点击一次,就回到(0,begin)的位置。而达不到缓动动画的效果。
其他回到顶部的方法
无动画
只需要直接获取到了当前滚动的长度,然后重新设置为0即可
document.documentElement.scrollTop = 0;
锚定位
点击该连接,可以直接去到id名为topAnchor部分的位置
<a href="#topAnchor">回到顶部</a>