分析js操作动态获取屏高并触发按钮点击事件回到页面窗口的顶部
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了分析js操作动态获取屏高并触发按钮点击事件回到页面窗口的顶部相关的知识，希望对你有一定的参考价值。
<!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）单词书写错误
以上是关于分析js操作动态获取屏高并触发按钮点击事件回到页面窗口的顶部的主要内容，如果未能解决你的问题，请参考以下文章