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
}
}
原文地址：https://www.cnblogs.com/zhang-jiao/p/9842380.html
时间： 2024-12-17 08:59:07