index.html
<!DOCTYPE html><html> ??<head> ????<meta charset="UTF-8"> ????<title>Document</title> ????<link herf="index.css"> ?????????</head> ?<body> ???????<span id="icon"></span> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<p>我是程序员，平凡有一点理想，渴望让世界不一样！</p> ???????<script src="scroll.js"></script> ???????????????<script src="index.js"></script> ??????</body></html>
index.css
???????????*{ ???????????????padding: 0; ???????????????margin: 0; ???????????????border: none; ???????????????list-style: none; ???????????} ???????????body{ ???????????????background-color: #ddd; ???????????} ???????????p{ ???????????????text-align: center; ???????????????font-size: 25px; ???????????????margin-bottom: 30px; ???????????} ???????????#icon{ ???????????????width: 43px; ???????????????height: 43px; ???????????????background: url("./images/to_top.png") no-repeat; ???????????????background-size: 100% 100%; ???????????????position: fixed; ???????????????bottom: 15px; ???????????????right: 20px; ???????????????display: none; ???????????}index.js
????????????window.onload=function(){ ????????????????//定义变量 ????????????????let scroll_top=0; ????????????????let begin=0,end=0,timer=null; ????????????????//监听窗口滚动事件 ????????????????window.onscroll=function(){ ????????????????????scroll_top=scroll().top; ????????????????????//显示和隐藏 ????????????????????scroll_top>0?show($("icon")):hidden($("icon")); ????????????????} ????????????????//监听图标的点击事件 ????????????????$("icon").onclick=function(){ ????????????????????//清除定时器 ????????????????????clearInterval(timer); ????????????????????//开启定时器 ????????????????????timer=setInterval(function(){ ???????????????????????begin+=(end-begin)*0.2; ???????????????????????window.scrollTo(0,begin); ???????????????????????//判断运动结束条件，清除定时器 ???????????????????????if(Math.round(begin)===end){ ???????????????????????????clearInterval(timer); ???????????????????????} ????????????????????????????????????????????},30); ????????????????} ????????????} ????????????function $(id){ ????????????????return typeof id==="string"?document.getElementById(id):null; ????????????} ????????????function show(obj){ ????????????????return obj.style.display="block"; ????????????} ????????????function hidden(obj){ ????????????????return obj.style.display="none"; ????????????}scroll.js
function scroll(){ ???if(pageYOffset!==null){ ???????return { ???????????top:window.pageYOffset, ???????????left:window.pageXOffset ???????} ???}else if(document.compatMode===CSS1Compat){ ???????return { ???????????top:document.documentElement.scrollTop, ???????????left:document.documentElement.scrollLeft ???????} ???} ???return { ???????top:document.body.scrollTop, ???????left:document.body.scrollLeft ???}}原生js实现返回顶部特效
原文地址：https://www.cnblogs.com/zhang-jiao/p/9842380.html