第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部。
HTML代码:
1
2
3
4
5
|
<
div
class
=
"container"
>
<
p
>你好哇</
p
>
...
</
div
>
<
div
id
=
"top"
>回到顶部</
div
>
|
CSS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.container{
border
:
1px
solid
black
;
}
#
top
{
position
:
fixed
;
padding
:
10px
;
width
:
20px
;
border
:
1px
solid
black
;
box-shadow:
0
0
2px
#333
;
right
:
20px
;
bottom
:
20px
;
}
#
top
:hover{
cursor
:
pointer
;
}
|
JS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//创建变量
var
scroll_Top = document.getElementById(
'top'
);
//用最常用的scrollTop属性实现
var
timer =
null
;
function
scrollTop(){
// 取消一个通过调用requestAnimationFrame()方法添加到计划中的动画帧请求.
cancelAnimationFrame(timer);
/* requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,
在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
一般来说,这个频率为每秒60帧。 */
timer = requestAnimationFrame(
function
sTop(){
var
top = document.body.scrollTop || document.documentElement.scrollTop;
if
(top > 0){
//使用定时器,将scrollTop的值每次减少20(自行设置),直到减少到0,则滚动完毕
document.body.scrollTop = document.documentElement.scrollTop = top - 20;
timer = requestAnimationFrame(sTop);
}
else
{
cancelAnimationFrame(timer);
}
});
}
scroll_Top.addEventListener(
'click'
, scrollTop,
false
);
|