<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回到顶部</title>
<style>
.d1{
width:100%;
height:5000px;
}
#btn{
width:100px;
height:40px;
position:fixed;
right:0;
bottom:0;
display:none;
}
</style>
</head>
<body>
<div class="d1">返回顶部</div>
<input id="btn" type="button" value="回到顶部">
<script>
window.onload=function(){
window.onscroll=function(){
//获取屏高，此处只是做了个兼容
let h=document.documentElement.scrollTop||document.boy.scrollTop;
//获取btn触发点击事件和后续的操作
let btn=document.getElementById("btn");
if(h>=innerHeight){
btn.style.display="block";
}else{
btn.style.display="none";
}
btn.onclick=function(){
window.scrollTo(0,0);
}
}
}
</script>
</body>
</html>
分析：
一、明确需求
（一）获取不同电脑的屏幕高度
（二）点击按钮回到页面窗口的顶部
二、解题思路
（一）利用html和css写出静态的需求页面
（二）js动态操控即可
三、如何细化思路？
（一）要达到需求的效果：
1.html的布局：
（1）一个div和div里文字内容（返回顶部）
（2）一个button和button上的提示文字（点我，回到顶部）
2.css的样式
（1）div高度的设置，主要使滚动条出现
（2）button按钮位置的设置，主要是将其固定设置在右下角。
注意：此处需要用到定位的知识，同时将button固定到右下角时要设置隐藏
3.js的实现
（1）获取不同电脑屏幕的高度
（2）获取电脑屏幕高度后做判断，同时设置button的显示和隐藏
（3）获取button并添加点击事件
（4）点击button后最后跳转到页面窗口的顶部
注意：以上js的操作都发生在页面出现window.onscroll（窗口拖动有滚动条）之下
4.难点
（1）获取屏高
（2）回到页面窗口顶部的语法
5.易犯的错误
（1）单词书写错误