1. 详解原生JS回到顶部

     更新时间:2019年03月25日 14:34:31   作者:LPANGFEI   我要评论

    这篇文章主要介绍了JS回到顶部,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

    HTML代码:

    <div class="container">
    	<p>你好哇</p>
    	...
    </div>
    <div id="top">回到顶部</div>

    CSS代码:

    .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代码:

    //创建变量
    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);
    

    效果手动截图:

    以上所述是小编给大家介绍的JS回到顶部详解整合,希望对大家有所帮助,如果大家有任?#25105;?#38382;请给我留言,小编会及时回复大家的。在此也非常?#34892;?#22823;家对脚本之家网站的支持!

    相关文章

    • JavaScript程序中实现继承特性的方式总结

      JavaScript程序中实现继承特性的方式总结

      JavaScript是一门强行声称面向对象的语言,而继承是面向对象的一大主要特性,这里我们根据阮一峰老师的文章来看一下JavaScript程序中实现继承特性的方式总结
      2016-06-06
    • 详解JavaScript编程中的数组结构

      详解JavaScript编程中的数组结构

      这篇文章主要介绍了详解JavaScript编程中的数组结构,是JS入门学习中的基础知识,需要的朋友可以参考下
      2015-10-10
    • javascript中神奇的 Date对象小结

      javascript中神奇的 Date对象小结

      日常生活中,各?#20013;?#24335;的时间字符到处都是。时间观念的产生,时间单位、计时工具的发明,给人类带来的变化实在一言难尽。今天就来谈谈日期那些事儿。一起来看看 JavaScript 中的日期对象 Date。
      2017-10-10
    • JavaScript 学习?#22987;?#20043;操作符

      JavaScript 学习?#22987;?#20043;操作符

      本文着重给大家介绍了javascript的操作符,包含一元操作符、位操作符、?#32423;?#25805;作符这3种类型,讲解的十分全面,小伙伴们参考下
      2015-01-01
    • javascript学习指南之回调问题

      javascript学习指南之回调问题

      回调函数被认为是一种高级函数,一?#30452;?#20316;为参数传递给另一个函数(在这称作"otherFunction")的高级函数,回调函数会在otherFunction内被调用(或执行)。回调函数的本质是一种模式(一种解决常见问题的模式),因此回调函数也被称为回调模式。
      2016-04-04
    • js中的caller和callee属性介绍和例子

      js中的caller和callee属性介绍和例子

      这篇文章主要介绍了js中的caller和callee属性介绍和例子,需要的朋友可以参考下
      2014-06-06
    • 老生常谈 关于JavaScript的类的继承

      老生常谈 关于JavaScript的类的继承

      下面小编就为大家带来一篇老生常谈 关于JavaScript的类的继?#23567;?#23567;编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2016-06-06
    • js选择器全面解析

      js选择器全面解析

      下面小编就为大家带来一篇js选择器全面解析。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2016-06-06
    • javascript模块化是什么及其优缺点介绍

      javascript模块化是什么及其优缺点介绍

      模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,?#32454;?#23450;义模块接口、模块间具有透明性
      2013-09-09
    • js中 关于undefined和null的区别介绍

      js中 关于undefined和null的区别介绍

      本篇文章小编将为大家介绍,js中 关于undefined和null的区别,有需要的朋友可以参?#23478;?#19979;
      2013-04-04

    最新评论

    山东群英会开奖查询