详解原生JS回到顶部

　　

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

　　

HTML代码:

　　 　　 　　& lt; div类="容器"比; 　　& lt; p>你好哇& lt;/p> 　　… 　　& lt;/div> 　　& lt; div id=岸ゼ丁痹诨氐蕉ゲ? lt;/div> 　　 　　

CSS代码:

　　 　　 　　.container { 　　边界:1 px固体黑色; 　　} 　　#{顶部 　　位置:固定; 　　填充:10 px; 　　宽度:20 px; 　　边界:1 px固体黑色; 　　不必:0 0 2 px # 333; 　　右:20 px; 　　底部:20 px; 　　} 　　#:{徘徊 　　光标:指针; 　　} 　　 　　

JS代码:

　　 　　//创建变量 　　var scroll_Top=. getelementbyid(“顶级”);//用最常用的scrollTop属性实现 　　var计时器=零; 　　函数scrollTop () {//取消一个通过调用requestAnimationFrame()方法添加到计划中的动画帧请求。 　　cancelAnimationFrame(计时器);/* requestAnimationFrame会把每一帧中的所有DOM操作集中起来, 　　在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率 　　一般来说,这个频率为每秒60帧。*/计时器=requestAnimationFrame(函数停止(){ 　　var=document.body。scrollTop | | document.documentElement.scrollTop; 　　如果(上比;0){//使用定时器,将scrollTop的值每次减少20(自行设置),直到减少到0,则滚动完毕 　　document.body。scrollTop=document.documentElement。scrollTop=最高- 20; 　　计时器=requestAnimationFrame(停止); 　　其他}{ 　　cancelAnimationFrame(计时器); 　　} 　　}); 　　} 　　scroll_Top。addEventListener(“点击”,scrollTop假); 　　之前 　　 　　

效果手动截图:

　　

详解原生JS回到顶部

　　

详解原生JS回到顶部

　　

以上所述是小编给大家介绍的JS回到顶部详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

详解原生JS回到顶部