详解原生JS回到顶部

第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部。 HTML代码...

第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习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 );
  • 发表于 2019-03-27 13:20
  • 阅读 ( 238 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除