使用原生js实现简单的回到顶部效果。需求比较明确：1.显示与隐藏按钮。2.中途再次触发onscroll清除定时器（暂时未实现，希望各位赐教）
代码：
<!-- time:2016.8.4 author:joel dom操作 1.document.getelementbyid 根据id获取标签元素 2.document.documentelement.scrolltop .ie滚动条数值 3.document.body.scrolltop .chrome 4.document.documentelement.clientheight 可视区域高度 事件运用 1.window.onload 加载完毕触发事件 2.onclick 点击触发事件 3.window.scroll 滚动条触发事件 定时器 1.setinterval() 2.clearinterval() --> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style type="text/css"> .btn:hover{ background: blue; } .btn{ display: none; height: 40px; width: 40px; background: red; position: fixed; left: 1410px; top: 600px; } .image{ width: 1190px; margin:0 auto; } </style> <script type="text/javascript"> window.onload = function(){ var mybtn = document.getelementsbyclassname("btn"); var clientheight = document.documentelement.clientheight; var timer = null; window.onscroll = function(){ var ostop = document.documentelement.scrolltop || document.body.scrolltop; if(ostop > clientheight){ mybtn[0].style.display = "block"; } else{ mybtn[0].style.display = "none"; } } mybtn[0].onclick = function(){ clearinterval(timer); timer = setinterval(function(){ var ostop = document.documentelement.scrolltop || document.body.scrolltop; var spd = math.floor((-ostop) / 1000); document.documentelement.scrolltop = ostop + spd; document.body.scrolltop = ostop + spd; if(ostop == 0){ clearinterval(timer); } },30); } } </script> </head> <body> <a href="javascript:;" class="btn">按钮</a> <p class="image"> <img src="tb_bg.jpg" alt=""> </p> </body> </html>
总结：
1.dom流的渲染顺序，hover写在a之前才会生效，否则会被覆盖。
2.各种属性方法的运用和简单的封装。
3.getelementsbyclassname 返回的是nodelist 所以要使用数组的形式。
4.不同浏览器下的兼容问题，放弃tab键的依赖性，使用两个空格代替。
5.emmet插件的安装和使用。
6.jq提供的动画能更加简便的实现回到顶部效果。锚点法在某些特定场合也可以使用，问题是会在浏览器输入栏显示某些细节。
相关推荐:
js实现回到顶部特效
js 滚动事件window.onscroll与position：fixed写兼容ie6的回到顶部组件
javascript - iframe外怎么使iframe的内容回到顶部
以上就是javascript实现回到顶部效果的示例的详细内容。