<!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）單詞書寫錯誤本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。
